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!

is using different classes possible so you can use toggleClass()? — Ohgodwhy
– Ohgodwhy, Commented Nov 7, 2013 at 5:26
I think it's important to note that you're not changing the appearance of your page with jQuery, you're using jQuery as a tool to set CSS properties. This is why you have a number of bad answers. @danzkusuma's is the canonically-correct way to do what you want. — Jeremy
– Jeremy, Commented Nov 7, 2013 at 5:29
I found this answer, is't perfect:<br> stackoverflow.com/a/27066643/2269902 — Hisham Dalal
– Hisham Dalal, Commented Apr 2, 2018 at 9:50

Fendy Kusuma · Accepted Answer · 2013-11-07 05:25:14Z

38

Try This :

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

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

answered Nov 7, 2013 at 5:25

Fendy Kusuma

6727 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eosphere Over a year ago

if there is only one item, just do : $('.myclass')[0].style.setProperty( 'height', '0px', 'important' );

Frederico Schardong Over a year ago

Apparently this doesn't work if you are trying to overwrite overflow: something !important;

Kamlesh Over a year ago

Not working dear, getting error - "Uncaught TypeError: Cannot read property 'setProperty' of undefined". I wrote like this $('.location-info-field').style.setProperty( 'height', '20px', 'important' );

user3556813 · Accepted Answer · 2014-04-21 13:55:52Z

20

Another Easy method to solve this issue adding style attribute.

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

This will solve your problem easily... :)

answered Apr 21, 2014 at 13:55

user3556813

2152 silver badges3 bronze badges

2 Comments

SHEKHAR SHETE Over a year ago

if i use 'style' then existing other properties will be overridden right? and only single property will be applied! and if i do so..then i have to add all other properties...which is not handy..! So, it would be better to set a single 'property' rather than re-write whole 'style' attibute..! :)

Kamlesh Over a year ago

This is not good solution, in case of already having other css on that same element. It is removing them and applying only width to 500px. Thanks.

9ete · Accepted Answer · 2014-09-12 23:37:55Z

5

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.

answered Sep 12, 2014 at 23:37

9ete

3,8021 gold badge36 silver badges34 bronze badges

1 Comment

aljgom Over a year ago

This will wipe out all other inline styles

Praveen · Accepted Answer · 2013-11-07 05:28:23Z

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

answered Nov 7, 2013 at 5:28

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

4 Comments

Jeremy Over a year ago

This will wipe out all other inline styles.

Praveen Over a year ago

@Jeremy No, I have mentioned the id selector(ids has to be unique). hope this gives you more understanding jsfiddle.net/Ezjc3/1

Jeremy Over a year ago

no, sorry, my comment still applies. If you add font-weight:bold to the inline declaration, this jQuery will remove the font-weight. example

lisandro Over a year ago

this worked fine for me.

abhiklpm · Accepted Answer · 2013-11-07 06:07:49Z

2

This will work like a charm

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

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

answered Nov 7, 2013 at 6:07

abhiklpm

1,6532 gold badges16 silver badges22 bronze badges

2 Comments

John Magnolia Over a year ago

This will wipe out all other inline styles

SHEKHAR SHETE Over a year ago

hey @JohnMagnolia, you are right! this will NOT be considered as perfect solution!

Ayyappan Sekar · Accepted Answer · 2013-11-07 05:25:17Z

1

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

answered Nov 7, 2013 at 5:25

Ayyappan Sekar

11.5k2 gold badges22 silver badges22 bronze badges

Comments

TGH · Accepted Answer · 2013-11-07 05:30:20Z

1

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

Would something like the above work?

edited Nov 7, 2013 at 5:30

answered Nov 7, 2013 at 5:24

TGH

39.4k13 gold badges106 silver badges140 bronze badges

2 Comments

Jeremy Over a year ago

This will wipe out all other inline styles, which is bad.

TGH Over a year ago

@Jeremy I agree, if there are any. However, if everything else is using classes than this could be an acceptable one off used as a workaround. Ideally it would be better to fix this by applying another class. Important should be used sparingly. In the above example there are no inline styles by default

Zainul Abdin · Accepted Answer · 2013-11-07 05:55:00Z

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.

웃웃웃웃웃 · Accepted Answer · 2014-03-18 05:39:35Z

1

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

edited Mar 18, 2014 at 5:39

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

answered Mar 18, 2014 at 5:21

mahendran

111 bronze badge

Comments

hatsrumandcode · Accepted Answer · 2015-11-15 18:11:52Z

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.

Krish R · Accepted Answer · 2013-11-07 05:38:24Z

0

Can you try this method,

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

Jquery:

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

answered Nov 7, 2013 at 5:38

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

1 Comment

SHEKHAR SHETE Over a year ago

hey @Krish R, what about the events that are wrote for .myclass? it will be scrapped if i do change the class..! there is a dependenacy as these divs & its following divs show content depending on classes that we applied..!

F.O.O · Accepted Answer · 2015-02-11 20:47:11Z

0

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.

answered Feb 11, 2015 at 20:47

F.O.O

5,0004 gold badges28 silver badges35 bronze badges

Comments

Angel M. · Accepted Answer · 2015-10-23 09:38:59Z

0

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

answered Oct 23, 2015 at 9:38

Angel M.

2,7522 gold badges34 silver badges44 bronze badges

Comments

Jeff Beagley · Accepted Answer · 2017-11-16 22:15:08Z

0

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; }" );

answered Nov 16, 2017 at 22:15

Jeff Beagley

1,02511 silver badges22 bronze badges

Comments

legendofawesomeness · Accepted Answer · 2013-11-07 05:23:07Z

-5

Have you tried this?

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

answered Nov 7, 2013 at 5:23

legendofawesomeness

2,9212 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

15 Answers 15

3 Comments

2 Comments

1 Comment

4 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

3 Comments

2 Comments

1 Comment

4 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related