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

.傻瓜选择{
显示：块；
}

... 
... 
... 

我想在用户调用函数changeCSS（）后，将display:block更改为display:none，用于所有

元素

---

它看起来很简单，但我找不到一种方法来实现这一点…

要获得相同的效果，您可以制作另一种样式：

<style type="text/css">
  .fool select {
    display: block;
  }
  .foolnone select {
    display: none;
  }
</style>

有关工作示例，请参见此JSFIDLE：

---

这显示了上述两种方法（即隐藏整个

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

JS

或者是一个真正有效的方法（但可能还需要一些更具体的样式规则）

JS

CSS

您可以修改样式规则，但这通常不是最佳的设计决策

若要访问样式表定义的样式规则，请访问
文档.styleSheets
集合。该集合中的每个条目都有一个名为
cssRules
或
rules
的属性，具体取决于浏览器。每个属性都将是一个实例。您可以通过更改其
cssText
pro来更改规则佩蒂

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

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

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

…当您想要隐藏选择时，将
“bar”
类添加到包含
“傻瓜”
类的容器中

或者，将CSS样式信息直接应用于元素。
我正在直接访问CSS类以同时调整一组div的高度。我就是这样做的：

function cssrules() {
    var rules = {};
    for (var i=0; i<document.styleSheets.length; ++i) {
        var cssRules = document.styleSheets[i].cssRules;
        for (var j=0; j<cssRules.length; ++j)
            rules[cssRules[j].selectorText] = cssRules[j];
    }
    return rules;
}

function css_getclass(name) {
    var rules = cssrules();
    if (!rules.hasOwnProperty(name))
        throw 'TODO: deal_with_notfound_case';
    return rules[name];
}

函数cssrules（）{
var规则={}；
对于（var i=0；i，我将这样做：


//为了方便起见，可以分成多行
设置超时
(
函数（）
{
document.getElementById（'style'）.innerHTML='p.myclass{display:none}'；
}, 5000
)；

5秒后：

此文本不会被隐藏

但这将
这也将如此
style=document.getElementById（'style'）；
setTimeout（函数（）{style.innerHTML='p.myclass{display:none}}，5000）；
您可以编辑样式表，
但我认为您应该创建一个新类。
如果你真的需要，试试这个。

    ss=document.styleSheets[0]

cssRules是样式表规则

    ss.cssRules
    ss.cssRules[0]

第一个规则的选择器

    ss.cssRules[0].selectorText

    ".channel > li"

阅读第一条规则的样式

    ss.cssRules[0].style

    CSS2Properties { "margin-left" → "0px"}

改变风格

    ss.cssRules[0].style.marginLeft="15px"

    ss.cssRules[0].style

CSS2Properties{“左边距”→ “15px”}
我想如果换成这样，它会起作用：

var elements = document.getElementsByTagName('select');
for(var i = 0; i < elements.length; i++){
    elements[i].style.display = 'none';
}

var elements=document.getElementsByTagName（'select'）；
对于（var i=0；i
可能与@j08691重复：不，这个问题是关于jQuery的。这个问题并不预先假设您使用了该库。您可以查看此网站，因为所选元素是
内联块，而不是
块。您最好在
无
和
'
（空字符串）之间切换因此，当未设置为
none
时，元素将采用其默认的显示属性。是的，但我特别需要“block”作为属性：-）我总是更喜欢添加另一个类，并使用更长的选择器定义不同的样式规则，而不是将该类更改为现有的类“傻瓜”也可用于其他用途，移除可能不安全entirely@wheresrhys完全同意-参见我添加的示例，展示了这两种方法。它为此添加了
displaynone
类。然而，适合您的项目是您可以考虑的，但这应该是您基本上可以使用的，除了细节。不是吗工作（甚至在“i=…”之前替换“；”，这是错误：“未捕获的类型错误：无法读取未定义的属性“样式”谢谢！这对我有效：var-selects=document.getElementsByTagName（“选择”）；for（var i=0，il=selects.length；i代替i.e.
.className+=“隐藏”
您可以使用
.classList.Add（“hidden”）
。它的性能更高，可维护性更好。修改规则是有意义的，因为类中有大量元素需要更改，它比逐个更改元素要快得多（这是任何基于选择器的函数必须做的）。将更改委托给家长也很快。完美的答案-你解释说，这通常不是最好的决定，但你不是出于哲学原因试图禁止某些事情，而是解释，如果需要的话，如何这样做。一个很有用的例子：你在DOM中有很多对象，并且修改clasS（让浏览器的C++代码进行硬计数工作）会产生更好的应用程序，比如用类选择器循环元素（并且从JS中进行硬的工作）。@彼得：是的，虽然上次我尝试过（几周后，尝试回答一个不同的问题）。，规则似乎变成了只读。我从来没有时间跟进这一点……这在firefox 21、opera 12.12和ie 10中也很有效。更详细的选择器规则也很有效。
css\u getclass（'td:first child a img'）.style.width=This.value+“em”；
注意兼容性您需要更改
dsi=ds[I].cssRules
到
dsi=ds[i].cssRules | | ds[i].rules
并请注意，如果以前的样式中存在相同的selectorText，则该函数将覆盖规则
    ss=document.styleSheets[0]

    ss.cssRules
    ss.cssRules[0]

    ss.cssRules[0].selectorText

    ".channel > li"

    ss.cssRules[0].style

    CSS2Properties { "margin-left" → "0px"}

    ss.cssRules[0].style.marginLeft="15px"

    ss.cssRules[0].style

var elements = document.getElementsByTagName('select');
for(var i = 0; i < elements.length; i++){
    elements[i].style.display = 'none';
}