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 ;)
Last active
March 21, 2023 08:54
-
-
Save tzi/2953155 to your computer and use it in GitHub Desktop.
How to set an !important css property in javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .test { | |
| height: 139px; | |
| width: 96px | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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' ); | |
| } | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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');
for add more properties:
element.setAttribute("style", "transition-duration: 6s; transform: rotateY(180deg); border: 1px solid red");
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.
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'
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.coloram 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.
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
!importanttag 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
Document.allis available in almost every browser right?I changed the test to
if (element.style.setAttribute != undefined)