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.

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

PS, obviously, this changes the style , not the stylesheet .

Answer 2

Try this:

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