18

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

谢谢,

4

2 回答 2

39

您可以使用与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/

于 2012-11-23T11:51:16.307 回答
6

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

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

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

于 2012-11-23T11:50:11.563 回答