javascript - 用 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 声明对象而不是用内联样式覆盖样式。

谢谢，

score 39 · Accepted Answer

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

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

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

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

这是一个演示：http: //jsfiddle.net/8Mnsf/1/

score 6 · Accepted Answer

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

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

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

2 回答 2