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... :)

Answer 3

You can do this:

$(".myclass").css("cssText", "height: 0 !important;");

Using "cssText" as the property name and whatever you want added to the css as it's value.

Answer 4

inline style fails to override the !important given in stylesheets.

Therefore !important can be overridden only by using !important along jQuery

Try like

$('#divL3.myclass').attr('style', 'height: 0px !important');

Answer 5

This will work like a charm

    $( '#divL3' ).css("cssText", "height: 0px !important;")

here's the fiddle http://jsfiddle.net/abhiklpm/Z3WHM/2/

Answer 6

$('#divL3.myclass').attr('style', 'height:0px !important');

Would something like the above work?

Answer 7

There is another trick to get it done!!! Can you remove the myclass from the element and apply the height. Like

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

Answer 8

First Id is unique identifier, therefore you don't need to search div by it's class name. therefore you can filter div by it's id.

Try following code

first add new Class property below myClass like this

<style>
            .myclass{
                height:50px !important;
                border: 1px solid red;
            }
            .testClass{
                height: 0 !important;
            }
        </style>

it will override height property of myClass

now just add this class to div

$('#divL3').addClass('testClass');

but making height "0" wont hide content of "divL3". you rather try to hide overflow content or hide entire div by adding css property display:none

hope it will work for you.

Answer 9

no use.suppose if i have some css properties in style attribure.it won't work.so please use below code

 var styleAttr = $("#divAddDetailPans").attr('style');
        $("#divAddDetailPans").removeAttr('style');
        $("#divAddDetailPans").attr('style', styleAttr.replace('top: 198px !important', 'top: 78px !important'));

Answer 10

I prefer to create a class and add it to specific div, for example

This can be either inline or in an external CSS file:

<style>
.class-with-important { height: 0px !important; }
</style>

If this is something that is never going to change, you can manually add the class to that div:

<div id="divL3" class="myclass class-with-important">sometext here</div>

or you can use jQuery to add this script tag at the bottom of that page

<script>
 $(document).ready(function(){
   $('#divL3').addClass("class-with-important");
 });
</script>

You can use the 'style' option, but would recommend doing it this way:

 var currentStyle = $('#divL3').attr('style');
 $('#divL3').attr('style', currentStyle + ' width:500px !important;');

This way you do not override the existing style, in case a third party plugin adds any dynamic style to your page, which is not unusual if you are using a CMS like WordPress.

Answer 11

Can you try this method,

        <style type="text/css">
        .myclass{
             height:50px !important;
        }
        .newclass{
             height:0px;
        }
        </style>

Jquery:

  $('#divL3').removeClass('myclass').addClass('newclass');  

Answer 12

I dont understand why you have !important in your CSS if you hope to override it later. Remove the !important in your CSS height. CSS always prioritizes your HTML tag styles over CSS.

 .myclass{
   height:50px;
  }

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

This is better for design.

Answer 13

I had the same issue, so I set up max-height in css, and then overrided height by jQuery:

css

#elem{
  max-height:30px !important;
}

jQuery:

$('#elem').height('30px !important');

Answer 14

I was running into a problem where we allow the users to define their own font size for Kendo Grids, however after setting the value, and then manipulating the grid in any way, it'd reset the font size. So we actually defined an ID for the style tag and changed the html with the proper CSS each time.

At the top of our main page, we set the font-size by what is saved in their PHP Session Variable, or from the database.

echo "<style id='grid-style'>table { font-size: $Grid_Font_Size !important; }</style>";

Then in order to change it, we do the following jquery where font_size is the new size

$( "#grid-style" ).html( "table { font-size: " + font_size + "px !important; }" );

Answer 15

Have you tried this?

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