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 wit

Answer 1

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 2

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 3

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 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

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; }