css - How to add !important to a stylesheet rule using JavaScript? - Stack Overflow

admin管理员组

文章数量:1356560

I've got a reference to a CSSStyleRule object in JavaScript and I want to update the style for border-top-color to red !important. If I assign the value red, no problems occur. If I assign the value red !important, the value is ignored (i.e. not assigned).

const myStyleSheetRule = document.getElementById("stylesheet").sheet.cssRules[0];

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

<style id="stylesheet">
  .box {
    display: inline-flex;
    border: 4px solid green;
    width: 100px;
    height: 100px;
    background: lightblue;
  }
</style>

<div class="box">gets red</div>
<div class="box" style="border-top-color: cyan">should also get red</div>

I've got a reference to a CSSStyleRule object in JavaScript and I want to update the style for border-top-color to red !important. If I assign the value red, no problems occur. If I assign the value red !important, the value is ignored (i.e. not assigned).

const myStyleSheetRule = document.getElementById("stylesheet").sheet.cssRules[0];

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

<style id="stylesheet">
  .box {
    display: inline-flex;
    border: 4px solid green;
    width: 100px;
    height: 100px;
    background: lightblue;
  }
</style>

<div class="box">gets red</div>
<div class="box" style="border-top-color: cyan">should also get red</div>

How do I set the !important flag?

Note that it has to be done via a stylesheet rule accessed programatically. In my use case, I can't assign a style attribute or anything else. I'm using Chrome on Windows 7.

• javascript
• css

Share Improve this question Follow edited Aug 26, 2024 at 17:49 gre_gor 6,7441111 gold badges7474 silver badges8989 bronze badges asked Jul 31, 2012 at 5:43 Nathan RidleyNathan Ridley 34.4k3535 gold badges130130 silver badges202202 bronze badges 2

• Why do you need to add !important. Is it to override a previous style set in JS? – elclanrs Commented Jul 31, 2012 at 5:50
• 1 I'm creating a jQuery plugin that requires it. – Nathan Ridley Commented Jul 31, 2012 at 5:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Something like this should work:

const myStyleSheetRule = document.getElementById("stylesheet").sheet.cssRules[0];
const myStyleSheet = myStyleSheetRule.parentStyleSheet;

if (myStyleSheet.insertRule) {
  const l = myStyleSheet.cssRules.length;
  myStyleSheet.insertRule('.box {border-top-color: Red !important}', l);
} else {
  //IE
  myStyleSheet.addRule('.box', 'border-top-color: Red !important', -1);
}

<style id="stylesheet">
  .box {
    display: inline-flex;
    border: 4px solid green;
    width: 100px;
    height: 100px;
    background: lightblue;
  }
</style>

<div class="box">gets red</div>
<div class="box" style="border-top-color: cyan">is also red</div>

Use setProperty with the priority argument.

const myStyleSheetRule = document.getElementById("stylesheet").sheet.cssRules[0];

myStyleSheetRule.style.setProperty("border-top-color", "red", "important");

<style id="stylesheet">
  .box {
    display: inline-flex;
    border: 4px solid green;
    width: 100px;
    height: 100px;
    background: lightblue;
  }
</style>

<div class="box">gets red</div>
<div class="box" style="border-top-color: cyan">is also red</div>

Try:

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

This will add it inline.

本文标签： cssHow to add important to a stylesheet rule using JavaScriptStack Overflow