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

Answer 1

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 2

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 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

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 5

Another Easy method to solve this issue adding style attribute.

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

This will solve your problem easily... :)

Answer 6

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');