How to override css containing '!important' using jquery?

Question

I want to apply height for specific div using jquery but not able to override the '!important' keyword using jquery.

Here is markup:

<div id="divL1" class="myclass">sometext here</div> <div id="divL2" class="myclass">sometext here</div> <div id="divL3" class="myclass">sometext here</div> <div id="divL4" class="myclass">sometext here</div> 

css:

.myclass{  height:50px !important; } 

Here i want to find the class "myclass" where divid equals "divL3"

I have Tried with:

$('#divL3.myclass').css('height', '0px'); 

but wont work! so, how to override '!important' css using jquery.

Help appreciated!

Answer 1

Try This :

$( '.myclass' ).each(function () {     this.style.setProperty( 'height', '0px', 'important' ); }); 

.setProperty () enables you to pass a third argument which represents the priority.

Answer 2

Another Easy method to solve this issue adding style attribute.

$('.selector').attr('style','width:500px !important'); 

This will solve your problem easily... :)