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

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

这将内联添加。

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

3 个答案: