-1

I would like to know if we can change the css of a tag in html from javascript. i know a approach of getting all elements with that tag using document.getElementsbyTagName and using a for loop to change the css properties of each... however im looking for an approach which might be much more compact like this document.getElementsbyTagName("p").style.color = "red"
EDIT: using .forEach is almost the same as using a for loop.... I didnt want to use this approach as it will take time to process all of the elements especially when the pages scale to have lots of p tags.

mrtechtroid
  • 658
  • 3
  • 14
  • 2
    There's no such method when you need to change the style of multiple elements. What you can do, is to wrap the wanted tags to a wrapper element, and change the class of the wrapper. In CSS you need a rule `.wrapper p {color: red;}`. Add `wrapper` class to the wrapper element when you want paragraphs with red text, and remove `wrapper` class from the wrapper element when you want the paragraphs with some original color. – Teemu Apr 27 '22 at 04:33
  • is `document.querySelectorAll("p").forEach(e => e.style.color='red')` more compact than whatever it is you're doing? – Bravo Apr 27 '22 at 04:36
  • using .forEach is almost the same as using a for loop.... i didnt want to use this approach as it will take time to process all of the elements especially when the pages scale to have lots of p tags. – mrtechtroid Apr 27 '22 at 04:39
  • yes, it will take time ... like, a few milliseconds .... a "native" function would also take time ... everything "takes time" ... it's just whether you think saving few milliseconds is that important in the scheme of things – Bravo Apr 27 '22 at 04:41
  • 1
    Use a stylesheet like I've adviced above, there's no way to set the inline style of multiple elements without iterating all those elements. You can use `body` as a wrapper element, if all the `p` elements are meant to change their color. – Teemu Apr 27 '22 at 04:42

3 Answers3

1

This is a one liner, less than this is impossible.

document.querySelectorAll("p").forEach(p => p.style.color = "red")


document.querySelectorAll("p").forEach(p => p.style.color = "red")
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
Cesare Polonara
  • 3,473
  • 1
  • 9
  • 19
  • 1
    the iterable that querySelectorAll returns has a native `.forEach` - so, it can be shorter :p – Bravo Apr 27 '22 at 04:38
  • Cool, I thought that all the multiple selector methods did not implement the .forEach() method natively! – Cesare Polonara Apr 27 '22 at 04:41
  • anything that returns a NodeList will have .forEach ... I believe what the older methods (byClassName byTagName etc), either a HTMLCollection or a NodeList, is different between browsers! – Bravo Apr 27 '22 at 04:43
  • Yes all the other methods *getBy* return instances of HTMLCollection which do not have a `.forEach` method in the proto, `querySelectorAll` return a NodeList on the other hand. I don't think it's browser related, I'm just used to spread the result into an array to be safe if you want to use other array methods., for example `NodeList` instances have a native `forEach` but don't have `map` and `filter` methods ! – Cesare Polonara Apr 27 '22 at 05:11
  • getElementsByName returns a NodeList - as does getElementsByTagName in WebKit browsers – Bravo Apr 27 '22 at 05:26
  • Then that's a pretty inconsistent behaviour to rely on, in Chrome/Edge on Windows they return HTMlCollections. I assume it's safer to spread the results into an array or to convert to an Array with `Array.from` – Cesare Polonara Apr 27 '22 at 05:37
  • 1
    document.querySelectorAll, being the new kid on the block, **is** consistent though :p – Bravo Apr 27 '22 at 05:47
  • Yes but always lacking .map, filter, .reduce, etc.... so basically it's almost useless :) . – Cesare Polonara Apr 27 '22 at 06:14
1

You could make a helper function that does it for you, maybe something like this:

function doAll(tagName, action) {
    document.querySelectorAll(tagName).forEach(action);
}
doAll("p", element => element.style.color = "red");
0x150
  • 589
  • 2
  • 11
-3

I'm not sure if changing style of tags without loop is possible. Though you can change style of a class or tag by changing properties of a stylesheet using javascript.

Reference : Change CSS of class in Javascript? MDN Docs Reference : StyleSheetList

Rajnish Anand
  • 85
  • 1
  • 6