用javascript修改CSS规则对象

一尘不染

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

谢谢，

阅读 228

2020-05-16

共1个答案

一尘不染

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

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

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

请注意，IE使用rules代替cssRules。

2020-05-16