Change CSS of class in Javascript?

Question

I've got a class with the display set to none I'd like to in Javascript now set it to inline I'm aware I can do this with an id with getElementById but what's the cleanest way to do it with a class?

Answer 1

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.

Answer 2

Do you mean something like this?

var elements = document.getElementsByClassName('hidden-class');
for (var i in elements) {
  if (elements.hasOwnProperty(i)) {
    elements[i].className = 'show-class';
  }
}

Then the CSS

.hidden-class { display: none; }
.show-class { display: inline; }

Answer 3

You can use getElementsByClassName in which you'll get an array of elements. However this is not implemented in older browsers. In those cases getElementsByClassName is undefined so the code has to iterate through elements and check which ones have the desired class name.

For this you should use a javascript framework such as jQuery, mootools, prototype, etc.

In jQuery it could be done with a one-liner as this:

$('.theClassName').css('display', 'inline')

Answer 4

you can create new style rule instead.

var cssStyle = document.createElement('style');
cssStyle.type = 'text/css';
var rules = document.createTextNode(".YOU_CLASS_NAME{display:hidden}");
cssStyle.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssStyle);

$("#YOUR_DOM_ID").addClass("YOUR_CLASS_NAME");

Answer 5

You may like to exploit/rewrite this function:

function getStyleRule(ruleClass, property, cssFile) {
    for (var s = 0; s < document.styleSheets.length; s++) {
        var sheet = document.styleSheets[s];
        if (sheet.href.endsWith(cssFile)) {
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            if (rules == null) return null;
            for (var i = 0; i < rules.length; i++) {
                if (rules[i].selectorText == ruleClass) {
                    return rules[i].style[property];
                    //or rules[i].style["border"]="2px solid red";
                    //or rules[i].style["boxShadow"]="4px 4px 4px -2px rgba(0,0,0,0.5)";
                }
            }
        }
    }
    return null;
}

• to scan all style sheets attached pass "" as third argument, otherwise something like "index.css"
• ruleClass contains starting '.'
• if (rules[i].selectorText && rules[i].selectorText.split(',').indexOf(property) !== -1) condition improvement found here https://stackoverflow.com/a/16966533/881375
• don't forget to use javascript syntax over css properties, e.g. box-shadow vs. boxShadow

Answer 6

Although this is long gone, here a few remarks:

• Using display: inline to make things visible again may spoil the page flow. Some elements are displayed inline, others block etc. This should be preserved. Hence, only define a .hidden style and remove it to make things visible again.

• How to hide: There are (at least) two ways to hide elements, one is the above mentioned display: none which basically makes the element behave as if it was not there, and the visibility: hidden which renders the element invisible but keeps the space it occupies. Depending on what you want to hide, the visibility may be a better choice, as other elements will not move when showing/hiding an element.

• Adding/removing classes vs. manipulating CSS rules: The result is quite different. If you manipulate the CSS rules, all elements having a certain CSS class are affected - now and in the future, i.e. new elements dynamically added to the DOM are also hidden, whereas when you add/remove a class, you must make sure that newly added elements also have the class added/removed. So, I'd say adding/removing classes works well for static HTML, whereas manipulating CSS rules might be a better choice for dynamically created DOM elements.

Answer 7

To change CLASS you need to edit document stylesheets

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
    .style.display='inline';

[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
    .style.display='inline';

.box {
  margin: 10px;
  padding: 10px;
  background: yellow;
  display: none
}

<div class="box" >My box 1</div>
<div class="box" >My box 2</div>
<div class="box" >My box 3</div>

Answer 8

Best way to do it is to have a hidden class, like so:

.hidden { display: none; }

After that, there is a className attribute to every element in JavaScript. You can just manipulate that string to remove occurrences of the hidden class and add another one.

One piece of advice: Use jQuery. Makes it easier to deal with that kind of stuff, you can do it like:

$('#element_id').removeClass('hidden').addClass('something');