如何添加！对使用JavaScript的样式表规则很重要吗？

我在JavaScript中引用了一个

CSSStyleRule

对象，我想将

边框顶部颜色的样式更新为
红色！重要信息
。如果我将值
指定为红色
，则不会出现任何问题。如果我指定值<代码>红色！重要信息

，忽略该值（即未赋值）

我该如何设置该选项！重要旗帜

注意，它必须通过编程访问的样式表规则来完成。在我的用例中，我不能指定样式属性或其他任何东西。我正在Windows 7上使用Chrome。请尝试：

myStyleSheetRule.setAttribute('style', 'border-top-color:red !important');

---

这会将其添加到内联中。

类似的操作应该可以：

HTML

<div id="colored">?</div>​​​​​​​​​​​​​​​​​​​​​​​​​

Javascript

#colored {
    border-top: 1px solid Black;
}​

var all = document.styleSheets,
    s = all[all.length - 1],
    l = s.cssRules.length;

if (s.insertRule) {
    s.insertRule('#colored {border-top-color: Red !important}', l);
} else {
    //IE
    s.addRule('#colored', 'border-top-color: Red !important', -1);
}​

---

这应该是个好办法

var property='color';
var value='red !important'; 
var selector='h1';

if(value.indexOf("!important") > 0){
           var newRule=myStyleSheetRule.style.cssText+" "+property+":"+value;
           myStyleSheetRule.insertRule(selector + " { " + newRule + "; }",/*indexOfTheRule*/);            
           myStyleSheetRule.deleteRule(/*indexOfTheRule*/);
    }

---

为什么需要添加

！重要信息

。它是为了覆盖JS中以前的样式集吗？我正在创建一个需要它的jQuery插件。那么为什么不将现有的样式属性读入新的样式属性呢？假设它们已经存在，只需读取它们，然后将它们与“border top color:red！”！“重要”。我想你不能申报！重要的是，对于JS样式，它必须内联编写或作为嵌入标记添加。这样做似乎很麻烦，但如果没有人能找到更好的方法，我会尝试一下。谢谢。如果需要的话，可以通过编程方式向样式表中添加任何您想要的内容。看看我的回答在这种情况下，你甚至不需要添加“！重要提示：由于上面的javascript将样式附加到样式表中，这意味着它必须覆盖样式表中的早期样式。因此，本质上，我猜唯一的方法是删除旧规则并添加新规则。直接设置样式属性将不起作用。关于你的评论，这不起作用，因为如果前一个选择器比后一个选择器更具体，样式的顺序没有帮助。我不明白你为什么需要取消旧规则？您只需将规则“附加”到样式表中。不杀任何东西。insertRule/addRule不会破坏任何东西，它们只是添加样式声明。我认为对于您的特定情况，最好的方法甚至是以编程方式创建一个新的样式表，将所有插件的样式添加到其中。但是，也许，你需要考虑创建普通样式表，而不是在JS中添加规则。我已经更新了JS代码段，以确保我们将样式规则附加到最新样式表，如果我们有不止一个样式表，规则也有其他样式，而不仅仅是我提到的样式。而且这不是一次性操作；规则经常被更改，因此我不能一直添加新规则。我可以删除我已经添加的那些当然。。。

var property='color';
var value='red !important'; 
var selector='h1';

if(value.indexOf("!important") > 0){
           var newRule=myStyleSheetRule.style.cssText+" "+property+":"+value;
           myStyleSheetRule.insertRule(selector + " { " + newRule + "; }",/*indexOfTheRule*/);            
           myStyleSheetRule.deleteRule(/*indexOfTheRule*/);
    }