如何使用JavaScript在样式表规则中添加！important？

Question

我已经在JavaScript中引用了CSSStyleRule对象，并且想将border-top-color的样式更新为red !important 。 如果将值赋为red ，则不会发生任何问题。 如果我给值red !important赋值，那么该值将被忽略（即未赋值）。

myStyleSheetRule.style.borderTopColor = 'red'; // success
myStyleSheetRule.style.borderTopColor = 'red !important'; // fail

如何设置！important标志？

注意，必须通过以编程方式访问的样式表规则来完成。 在我的用例中，我无法分配样式属性或其他任何属性。 我在Windows 7上使用Chrome。

Answer 1

这样的事情应该起作用：

的HTML

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

默认样式表

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

Java脚本

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);
}​

Answer 2

这应该可以解决问题。

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*/);
    }

Answer 3

尝试：

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

这将内联添加。