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

有没有办法使用 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()后的元素。

它看起来很简单，但我找不到方法来做到这一点......

You can修改样式规则，但这通常不是最好的设计决策。

要访问样式表定义的样式规则，您可以访问document.styleSheets收藏。该集合中的每个条目都有一个属性，称为cssRules or rules取决于浏览器。每一个those将是一个CSSRule http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule实例。您可以通过更改规则来更改规则cssText财产。

但同样，这可能不是解决问题的最佳方法。但这是你问题的字面答案。

解决问题的最佳方法可能是在样式表中添加另一个类来覆盖前一个规则的设置，然后将该类添加到select元素或它们的容器。例如，您可以制定规则：

.fool select {
    display: block;
}
.fool.bar select {
    display: none;
}

...当您想隐藏选择时，添加"bar"类具有"fool" class.

或者，将 CSS 样式信息直接应用于元素。