修改CSS规则的对象用JavaScript

可能重复：
Changing a CSS rule-set from Javascript 修改CSS规则的对象用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声明对象而不是用内联的样式覆盖样式。

谢谢，

2012-11-23 jonBreizh

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

。

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

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

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

2012-11-23 11:51:16

准确地说，我在找什么。感谢提示。 – jonBreizh

这很好。我想知道我是否可以在不引用其索引位置的情况下定位特定规则集。 – Musixauce3000

@ Musixauce3000你想要通过哪些规则设置？ –

只需定义您的类，并指定/删除类的HTML元素与JavaScript。

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

编辑：您可能希望使用cssText财产

看到这里的例子cssText property

2012-11-23 11:50:11

为此，我需要知道的修改风格会是什么样提前。如果基础样式基于用户输入，会怎么样？对于你的解决方案，我需要创建一个新的css类，这只是一种不同的方式来查看访问样式表问题 – jonBreizh

我更新了答案，检查cssText属性 –

感谢但仍然基于javascript/inline造型编辑：快速误读csstext是编辑样式表解决方案的一部分 – jonBreizh

回答