使用javascript修改css规则对象

Question

  

可能重复：
  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声明对象，而不是用内联的方式覆盖样式。

谢谢，

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 property