Changing css style sheet with javascript

Question

I have the following:

<style>
 .el {color: blue;}
</style>
<div class="el">bla bla</div>
<div class="el">bla bla 123</div>

And i need to use JavaScript to change the color in .el. I know about document.styleSheets but that seems kind of crude, having to loop search for the class i want to change it that way. Isn't there some better (lighter) way to do this nowadays? Something like

document.stylesheets.getclass('.el').color = 'red';

Thanks.

• George: This could be a helpful page to you
• SolessChong: Check out Setting CSS pseudo-class rules from JavaScript @ StackOverflow
• Sameera Thilakasiri: You can change the class, I think it would be better idea.
• punkrockbuddyholly: "Isn't there some better (lighter) way to do this nowadays?" Nope.There isn't.

Answer 1

You're on the right track. The method you're looking for is getElementsByClassName, not getClass. It returns an array, and then you simply loop through the array and assign the new color.

var el = document.getElementsByClassName('el'),
 i;
for (i = 0; i < el.length; i += 1) {
 el[i].style.color = 'red';
}

Demo

P.S., obviously, this changes the style, not the stylesheet.

• Anoop Joshi P: @user2079305: if you need to do without looping, use jquery like $(".el").css('color', 'red')
• Derek Henderson: Yes, you're right. There are so many browser compatibility issues with trying to change the stylesheet directly that it's not practicable. And it's not as if you can save the changed stylesheet on the server.
• user2079305: Well yes, after looking at alternatives, I think that this will be the best solution. Definitely better than stylesheet array crawl.

Answer 2

Try this:

var elem = document.getElementsByClassName('el');
 for (var i = 0; i < elem.length; i++) {
 elem[i].style.color = '#aaaaaa';
 }

Answer 3

Changing the stylesheet dynamically is possible, but not that simple. Here is an example using .little PHP and jQuerY:

https://stackoverflow.com/a/78293807/760777

Answer 4

You can have 2 stylesheets such as:

<link id="style_1" rel="stylesheet" type="text/css" href="style_1.css">
<link id="style_2" rel="stylesheet" type="text/css" href="style_2.css">

Then add disabled attribute with JS to the one you'd like to disable, so the other will take effect.