用javascript修改css规则对象[重复]答案

【问题标题】：modify a css rule object with javascript [duplicate]用javascript修改css规则对象[重复]
【发布时间】：2012-11-11 18:50:19
【问题描述】：

可能重复：
Changing a CSS rule-set from Javascript

我想知道是否有可能在不使用内联样式的情况下修改 Css 样式表声明。

这是一个简单的例子：

<style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

<div class="box">TEXT</div>

这给出了一个蓝色的书写框，在悬停时变成绿色。

如果我为颜色提供内联样式，悬停行为将丢失：

<div class="box" style="color:red;">TEXT</box>

无论如何，这都会给出一个红色的文字框。

所以我的问题是，如何访问和修改 css 声明对象，而不是用内联的样式覆盖样式。

谢谢，

【问题讨论】：

【解决方案1】：

只需定义您的类，并使用 javascript 为 HTML 元素分配/删除类。

直接为元素指定样式，具有最高优先级，它将覆盖所有其他 CSS 规则。

编辑：您可能想要使用 cssText 属性，请参阅此处的示例 cssText property

【讨论】：

【解决方案2】：

您可以使用与原始样式表对应的 DOM 样式表对象上的 cssRules 来修改您的规则。

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

请注意，IE 使用rules 而不是cssRules。

【讨论】：

正是我想要的。感谢您的提示。
这很好。我想知道是否可以在不引用其索引位置的情况下定位特定规则集。
@Musixauce3000 你想通过什么做什么来定位规则集？
@AsadSaeeduddin 好吧，也许是标签。像 div、.wrapper 或 #output 。例如：document.stylesheet[0].cssRules[".mockButton"].style.color = '#FFF';
@Musixauce3000 我的 sn-p 中的 rules 变量是一个 CSSRuleList，本质上是一个 CSSRule 对象数组。假设您只是在寻找样式声明规则，您可以过滤 rules 以仅隔离 CSSStyleRule 实例，然后过滤这些以查找 selectorText 属性与某些字符串（或正则表达式）匹配的实例。