Skip to content

Instantly share code, notes, and snippets.

@tzi
Last active March 21, 2023 08:54
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save tzi/2953155 to your computer and use it in GitHub Desktop.
Save tzi/2953155 to your computer and use it in GitHub Desktop.
How to set an !important css property in javascript

If you want to try it, go here

To set a CSS inline style as an !important one in javascript, you have to use the element.setAttribute() method.

But you can't use this one in old IE to set style. There is a specific syntax ;)

.test {
height: 139px;
width: 96px
}
(function(){
var elements = document.getElementsByTagName( 'div' );
element = elements[ 0 ];
// Specific old IE
if ( document.all ) {
element.style.setAttribute( 'cssText', 'background-image: url( "http://placekitten.com/200/300" ) !important' );
// Modern browser
} else {
element.setAttribute( 'style', 'background-image: url( "http://placekitten.com/200/300" ) !important' );
}
})();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to set an !important css property in javascript</title>
<link href="important.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="test">Miaaou</div>
<script type="text/javascript" src="important.js"></script>
<body>
</html>
@mikebaldry
Copy link

Document.all is available in almost every browser right?

I changed the test to if (element.style.setAttribute != undefined)

@imixtron
Copy link

There is an easier way of doing this using the method style.setProperty(propertyName, value, priority);.
you can set priority = 'important' to apply the !important suffix at the end of the style.
you can find the spec over the mdn forum or the w3.org

example:

let elem = document.querySelector('#js-example');
elem.style.setProperty('display', 'flex', 'important');

@kahilkubilay
Copy link

kahilkubilay commented Nov 9, 2019

for add more properties:
element.setAttribute("style", "transition-duration: 6s; transform: rotateY(180deg); border: 1px solid red");

@elementarray
Copy link

I used this to override "Ubermenu" styles... tried everything (even setting style.attribute to null first...) but this worked! I was also using getElement[s]By[Id,ClassName] because those 2 methods work on "live" elements: getElementById Element Object, getElementsByClassName returns a live HTMLCollection (Array like Object) as opposed to querySelector[All] which querySelectorAll returns a static (not live) NodeList, and querySelector an HTMLElement. This matters when attempting to access dynamically generated objects like dropdown lists for example. Thanks again.

@creativeDM
Copy link

How to set the !important css property using pure Javascript (element.dataset.color)
Any solution for the method like below???
el.style.backgroundColor = element.dataset.color

am trying this
el.style.backgroundColor = element.dataset.color + '!important'

Same trick works fine with + '%' , Whats wrong with + '!important'

@NachoToast
Copy link

NachoToast commented May 27, 2021

How to set the !important css property using pure Javascript (element.dataset.color)
Any solution for the method like below???
el.style.backgroundColor = element.dataset.color

am trying this
el.style.backgroundColor = element.dataset.color + '!important'

Same trick works fine with + '%' , Whats wrong with + '!important'

The !important tag can't be concatenated onto the end of the string the same way % does, it's not a unit.

@mangelozzi
Copy link

mangelozzi commented Aug 25, 2022

How to set the !important css property using pure Javascript (element.dataset.color)
Any solution for the method like below???
el.style.backgroundColor = element.dataset.color
am trying this
el.style.backgroundColor = element.dataset.color + '!important'
Same trick works fine with + '%' , Whats wrong with + '!important'

The !important tag can't be concatenated onto the end of the string the same way % does, it's not a unit.

Its not that far fetched, since !important is concatenated onto the end of the string in style sheets, even though it's not a unit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment