使用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 to display:none for ALL elements.

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

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

Answer 2

我正在直接访问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];
}

然后你可以做类似的事情css_getclass('.classname').style.background="blue".我只在chrome for Windows上试过这个,祝其他浏览器好运.

Answer 3

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

要访问样式表定义的样式规则,请访问该document.styleSheets集合.该集合中的每个条目都将具有调用cssRules或rules取决于浏览器的属性.每一个这些将是一个CSSRule实例.您可以通过更改其cssText属性来更改规则.

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

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

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

...当您想要隐藏选择时,将"bar"类添加到具有该类的容器中"fool".

或者,将CSS样式信息直接应用于元素.

Answer 4

您可以编辑样式表，\n但我认为您只需创建一个新类即可。\n如果你确实需要这样做，请尝试这个。

\n\n

    ss=document.styleSheets[0]\n

\n\n

cssRules 是样式表规则

\n\n

    ss.cssRules\n    ss.cssRules[0]\n

\n\n

第一条规则的选择器

\n\n

    ss.cssRules[0].selectorText\n\n    ".channel > li"\n

\n\n

阅读第一条规则的样式

\n\n

    ss.cssRules[0].style\n\n    CSS2Properties { "margin-left" \xe2\x86\x92 "0px"}\n

\n\n

改变风格

\n\n

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

\n\n

CSS2Properties { "margin-left" \xe2\x86\x92 "15px" }

\n