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>

我想在用户调用函数changeCSS（）之后更改display：block to display：none for all <select>元素。

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

Answer 1

我正在直接访问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 2

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

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 3

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

要访问样式表定义的样式规则，请访问document.styleSheets集合。根据浏览器的不同，该集合中的每个条目都会有一个名为cssRules或rules的属性。那些中的每一个都是CSSRule个实例。您可以通过更改其cssText属性来更改规则。

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

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

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

...如果要隐藏选择，请将"bar"类添加到具有"fool"类的容器中。

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

Answer 4

我是这样做的：

//Broken up into multiple lines for your convenience
setTimeout
(
  function()
  {
    document.getElementById('style').innerHTML = 'p.myclass{display: none}';
  }, 5000
);

<!--Should this be separated into "<head>"?-->
<style id="style"></style>

<p>After 5 seconds:</p>
<p>This text won't be hidden,</p>
<p class="myclass">But this will,</p>
<p class="myclass">And so will this.</p>

<script>
	style = document.getElementById('style');
	setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000);
</script>

Answer 5

您可以编辑样式表，但我想您会创建一个新类。如果您确实需要这样做，请尝试此操作。

    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 {“ margin-left”→“ 15px”}

Answer 6

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

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

并将<p>的班级更改为foolnone。

否则，您必须通过<p>的每个孩子并更改课程。如果这是您想要的方式，可能最好使用某些库，例如jquery。有了它，你可以做类似的事情：

<style>
.fool select.displaynone {
   display: none
}

$('.fool>select').toggleClass('displaynone')

有关工作示例，请参阅此jsfiddle：

http://jsfiddle.net/3ujau/1/

这显示了上述两种方法（即隐藏整个<p>并隐藏每个<select>。

Answer 7

我认为如果这样放置，它会起作用：

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

Answer 8

 for(var elements = document.getElementsByTagName('select'), i = elements.length; i--)
     elements[i].style.display = "none";

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

8 个答案: