Question

157

Change the style of an entire CSS class using javascript

rated 0 times [ 159] [ 2] / answers: 1 / hits: 86803 / 13 Years ago, sun, february 5, 2012, 12:00:00

Is there a way to change an attribute of a CSS class using javascript?

<style type=text/css>

  .fool select {

    display: block;

  }

</style>



<p class=fool>

  <select id=a onchange=changeCSS()> ... </select>

  <select id=b > ... </select>

  <select id=c > ... </select>

</p>

I want to change display:block to display:none for ALL <select> elements after a user call function changeCSS().

It looks simple but I can't find a way to do this...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shamya

Add To Favorites

Follow

Total Points: 38

Total Questions: 101

Total Answers: 96

Location: Thailand

Member since Thu, Apr 22, 2021

3 Years ago

answered 13 Years ago tomas · Accepted Answer

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;

}