Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.s3.amazonaws.com/homepage-samples/96/139.jpg" ) !important' );
// Modern browser
} else {
element.setAttribute( 'style', 'background-image: url( "http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg" ) !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

This comment has been minimized.

Copy link

@mikebaldry mikebaldry commented Apr 20, 2017

Document.all is available in almost every browser right?

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

@imixtron

This comment has been minimized.

Copy link

@imixtron imixtron commented Aug 29, 2018

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

This comment has been minimized.

Copy link

@kahilkubilay kahilkubilay commented Nov 9, 2019

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

@elementarray

This comment has been minimized.

Copy link

@elementarray elementarray commented Aug 29, 2020

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

This comment has been minimized.

Copy link

@creativeDM creativeDM commented Feb 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'

@NachoToast

This comment has been minimized.

Copy link

@NachoToast 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.

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