Change the Style of an Entire CSS Class Using JavaScript

How to change a css class style through Javascript?

Suppose you have:

<div id="mydiv" class="oldclass">text</div>

and the following styles:

.oldclass { color: blue }
.newclass { background-color: yellow }

You can change the class on mydiv in javascript like this:

document.getElementById('mydiv').className = 'newclass';

After the DOM manipulation you will be left with:

<div id="mydiv" class="newclass">text</div>

If you want to add a new css class without removing the old one, you can append to it:

document.getElementById('mydiv').className += ' newClass';

This will result in:

<div id="mydiv" class="oldclass newclass">text</div>

Change the style of an entire CSS class using javascript

The key is to define extra rules for additional classes and add these classes to the elements rather than to rewrite the rules for a given style rule.

JS

function changeCSS() {
  var selects = document.getElementsByTagName("select");
  for(var i =0, il = selects.length;i<il;i++){
     selects[i].className += " hidden";
  }
}

CSS

.fool select.hidden, select.hidden {
   display: none;
}

Or for a really efficient method (but which might need a few more specific style rules too)

JS

function changeCSS() {
  document.getElementsByTagName("body")[0].className += " hideAllSelects"
}

CSS

body.hideAllSelects select {
   display: none;
}

Is it possible to change entire css class / js and anything associate with that?

Others have mentioned Jquery.

You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.

Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).

Getting or changing CSS class property with Javascript using DOM style

As mentioned by Quynh Nguyen, you don't need the '.' in the className. However - document.getElementsByClassName('col1') will return an array of objects.

This will return an "undefined" value because an array doesn't have a class. You'll still need to loop through the array elements...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}

Change CSS of class in Javascript?

You can do that — actually change style rules related to a class — using the styleSheets array (MDN link), but frankly you're probably better off (as changelog said) having a separate style that defines the display: none and then removing that style from elements when you want them no longer hidden.

Modify CSS classes using Javascript

The reason only one or the other works is because in your second line of code, you destroy the whole style attribute, and recreate it. Note that setAttribute() overwrites the whole attribute.

A better solution would be to use the element.style property, not the attribute;

var bg = document.getElementById("myBg");
bg.style.width = imgWidth + "px";
bg.style.height = imgHeight + "px";

You can grab all elements with class container and apply it to each of them like this:

var elements = document.querySelectorAll('.container');
for(var i=0; i<elements.length; i++){
    elements[i].style.width = imgWidth + "px";
    elements[i].style.height = imgHeight + "px";
}

Note querySelectorAll isn't supported by IE7 or lower, if you need those then there are shims for getElementsByClassName() here on SO.

Apply CSS change to a whole class at once with JavaScript

You can change or add new css rules with Javascript like this

var style = document.styleSheets[0].cssRules || document.styleSheets[0].rules;for (var i = 0; i < style.length; i++) {  if (style[i].selectorText == '.classToChange') {    style[i].style['font-size'] = '50px';  }}

.classToChange {  color: blue;}

<p class="classToChange">Lorem</p>

---

Related Topics