使用javascript修改css规则对象

Question

可能重复:
从Javascript更改CSS规则集

我想知道是否有可能修改Css样式表声明而不进行内联样式.

这是一个简单的例子:

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

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

这会给出一个蓝色的书写框,在悬停时变成绿色.

如果我为颜色提供内联样式,则悬停行为将丢失:

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

无论如何,这会给出一个红色的书写框.

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

谢谢,

Answer 1

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

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

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

请注意,IE使用rules而不是cssRules.

这很好。我想知道是否可以在不引用其索引位置的情况下针对特定规则集。 (2认同)
@ Musixauce3000我的代码片段中的`rules`变量是[`CSSRuleList`]（https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList），本质上是[`CSSRule`的数组]（https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule）对象。假设您只在寻找样式声明规则，则可以过滤`rules`仅隔离[`CSSStyleRule`]（https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule）实例，然后过滤它们以找到那些selectorText属性与某个字符串（或正则表达式）匹配的对象。 (2认同)

Answer 2

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

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

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