如何动态更改样式表中 CSS 属性的值？答案

【问题标题】：How to dynamically change the value of a CSS property inside a stylesheet?如何动态更改样式表中 CSS 属性的值？
【发布时间】：2012-02-06 12:38:12
【问题描述】：

如果我有 css：

.myclass
{
background: #FF00FF;
}

还有html：

<div class="myclass">etc.</div>
<div class="myotherclass">etc.</div>
<div class="myclass">etc.</div>

如何将 myclass 的背景变量更改为另一种颜色，以便该类的所有 div 都更改其背景？

请不要使用 jquery，谢谢

【问题讨论】：

背景变量？
CSS 没有变量，猜你的意思是类名。
您认为样式表中的更改属性将应用于该元素而不是 onload 事件吗？页面完全加载后，如果您更改样式表中的属性，是否会影响页面中的元素？
@AmGates 确实如此。请参阅我的答案中的演示。
@Šime Vidas 我问它除了 onload 事件还能工作

标签： javascript css class

【解决方案1】：

给你：

[].every.call( document.styleSheets, function ( sheet ) {
    return [].every.call( sheet.cssRules, function ( rule ) {
        if ( rule.selectorText === '.myclass' ) {
            rule.style.backgroundColor = 'green';
            return false;
        }
        return true;
    });
});

现场演示： http://jsfiddle.net/gHXbq/

ES5-shim for IE8

【讨论】：

我有数千个 div，但只有少数需要更改，所以这种事情要慢。我看不出有什么办法可以为每个 div 添加一个 id，哦，好吧。
@Myforwik 你是什么意思？我不是在迭代 DIV 元素，而是迭代样式表。我的代码的性能并不取决于页面上有多少 DIV。
糟糕，我的意思是说我有数千个课程，每个课程通常使用大约 2 或 3 个 div。
@Myforwik 你需要改变这上千个班级中的任何一个的背景吗？所以你有几千种不同的颜色？

【解决方案2】：

当我说你可以尝试这样的事情时，希望我接近你的期望：-

$(document).ready(function(){
    $("button").click(function(){
        $("div").toggleClass("myclass");
    });
});

.myclass
    {
       background: #FF00FF;
    }

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<button>Set the color property of all p elements</button>

<div class="myclass">etc.</div>
<div class="myotherclass">etc.</div>
<div class="myclass">etc.</div>



</body>
</html>

【讨论】：