使用javascript更改整个CSS类的样式

Question

有没有一种方法可以使用javascript更改CSS类的属性？

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

我想<select>在用户调用函数changeCSS（）后将display：block更改为display：none，将所有元素都更改为无。

看起来很简单，但我找不到解决方法…

Answer 1

关键是为其他类定义额外的规则，并将这些类添加到元素中，而不是重写给定样式规则的规则。

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

或使用真正有效的方法（但可能还需要一些特定的样式规则）

JS

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

CSS

body.hideAllSelects select {
   display: none;
}