用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

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

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

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

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

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

Answer 2

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

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

编辑:您可能想使用cssText属性，参见这里的示例cssText性质