JARVIS-AI/important.css

## readme.md

      
    Raw
  

              readme.md
            
          
    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 ;)

  
## important.css
.test {
	height: 139px;
	width: 96px
}

## important.js
(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' );
	}
})();

## index.html
<!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>
	(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>