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.
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';
}
P.S., obviously, this changes the style, not the stylesheet.
Try this:
var elem = document.getElementsByClassName('el');
for (var i = 0; i < elem.length; i++) {
elem[i].style.color = '#aaaaaa';
}
Changing the stylesheet dynamically is possible, but not that simple. Here is an example using .little PHP and jQuerY:
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.
