使用JavaScript或jQuery修改CSS规则？

Question

是否可以使用javascript或jquery编辑/修改现有的CSS规则？ 例如，样式表具有此类：

.red {
    color: red;
}

我有10个使用该类的元素。

我想做的是像这样编辑类：

.red {
    color: blue;
}

这样它也将影响同一类的将来实例。 （第11、12、13个元素，依此类推）。

Answer 1

这是使用JavaScript更改CSS规则的方式。

 var ss = document.styleSheets; var m = document.getElementById('modifiedRule'); for (i = 0; i < ss.length; i++) { var rules = ss[i]; for (j = 0; j < rules.cssRules.length; j++) { var r = rules.cssRules[j]; if (r.selectorText == ".red") { m.innerHTML = "<br />Old rule: " + r.cssText; r.style.color = "blue"; m.innerHTML += "<br />Modified rule: " + r.cssText; } } } 

 .red { color: red; } 

 <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div id="modifiedRule"></div> 

Answer 2

Javascript提供了document.stylesheets集合，该集合提供了CSSStyleSheet对象的列表。 您可以遍历此集合以找到您感兴趣的任何特定CSS规则并修改其规则。

但是，正如我之前提到的，这可能不是您要实现的正确方法。 它可能有点依赖浏览器，但感觉很笨拙。

您最好有2条单独的规则

.red { color :red }
.blue { color : blue }

在您的JavaScript中，维护一个变量，该变量保存元素的当前默认类，即。 current_class ='蓝色'。 创建元素时，只需添加.addClass（current_class）。 当您想更改所有元素时，.toggleClass（current_class，new_class）。

Answer 3

在我看来，您可以这样做：

var reds = $('.red');
var index = 1;
reds.each(function(){
    $(this).css('color', index > 10 ? 'blue' : 'red');
    index++;
})

Answer 4

在我看来，您要问的是对CSS的滥用（无论您是否针对特定问题找到了可行的解决方案）。

我会这样处理：

.red .myElementClass{ /*or perhaps .red>.myElementClass*/
    color:red;
}
.blue .myElementClass{ /*or perhaps .blue>.myElementClass*/
    color:blue;
}

---

<div id="outer" class="red">
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
</div>

现在，您可以根据需要添加任意数量，并更改其所有颜色，只需将div#outer的类交换为blue 。

Answer 5

我相信jQuery .css（）是您要找的东西。

$('.red').css('color', 'blue');

http://api.jquery.com/css/