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

Question

如果我有css：

.myclass
{
background: #FF00FF;
}

和HTML：

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

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

请不要jquery，谢谢

Answer 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/

IE8的ES5-shim

Answer 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>

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

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-01-10 01:50:07

解决方案2
0

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

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-01-10 01:50:07

解决方案2 0

解决方案1
5 已采纳 2012-01-10 01:50:07

解决方案2
0