javascript - 如何使用 JavaScript 将 !important 添加到样式表规则？

Question

我CSSStyleRule在 JavaScript 中引用了一个对象，我想更新 to 的border-top-color样式red !important。如果我分配 value red，则不会出现问题。如果我分配 value 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;
}​

Javascript

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');

这将内联添加它。