Change class style by JavaScript

Question

I use in the head of a page a style tag with definition of the styles used by elements in the body using the ‘class’ attribute. Example:

.itemColor { color:red; }

Is it possible, with javascript, to change the value of the color property in the classes defined in the tag style?

Thank you. I presume it's here I have to answer. – Eric Apr 19 '19 at 14:57 — Eric, Apr 19 '19 at 14:57

score 0 · Answer 1 · answered Apr 18 '19 at 12:52

For your example, you would first select your item, and then change its style:

    myitem = document.getElementById("itemColor") // searches in all children and grandhildren of document
    myitem.style.color = "blue";

You can do the same for the elements in getElementsByClassName and getElementsByTagName, which are HTML collections.

With the following, you can override all elements' properties having said class.

myitems = document.getElementsByClassName("itemColor")  // HTMLCollection
[].forEach.call(myitems, function(subitem){
        subitem.style.color = "blue";
    }
);

console.log(myitem.style) to see all attributes you can change.

Change class style by JavaScript

1 Answers1