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 ;)
-
-
Save JARVIS-AI/b04bd7da23fe0ec1f0f69520d3e682c3 to your computer and use it in GitHub Desktop.
How to set an !important css property in javascript
This file contains hidden or 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 hidden or 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.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' ); | |
| } | |
| })(); |
This file contains hidden or 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment