有没有办法使用 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 。
看起来很简单，但我找不到办法做到这一点......
您可以修改样式规则，但这通常不是最佳设计决策。
要访问由样式表定义的样式规则，您需要访问document.styleSheets集合。该集合中的每个条目都将有一个属性，要么被调用，cssRules要么rules取决于浏览器。每一个这些将是一个CSSRule实例。您可以通过更改其cssText属性来更改规则。
但同样，这可能不是解决问题的最佳方法。但它是你问题的字面答案。
解决此问题的最佳方法可能是在样式表中添加另一个类来覆盖上一条规则的设置，然后将该类添加到select元素或元素的容器中。因此，例如，您可以制定规则：
.fool select {
display: block;
}
.fool.bar select {
display: none;
}
...当您想隐藏选择时，将该"bar"类添加到具有该类的容器中"fool"。
或者，将 CSS 样式信息直接应用于元素。
关键是为额外的类定义额外的规则并将这些类添加到元素中，而不是为给定的样式规则重写规则。
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;
}
我直接访问 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 上试过这个，祝其他浏览器好运。
这是我的做法：
//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>您可以编辑样式表，但我认为您只需创建一个新类即可。如果你真的需要这样做，试试这个。
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" }