How to include !important in jquery

Question

I am trying to add !important in the css attribute using jQuery like

$("tabs").css('height','650px;!important');

but !important has no effect. How to include !important in jquery?

Can you try without the semicolon between the value and !important? — Pekka
– Pekka, Commented Dec 31, 2009 at 17:04
Though Marc W's Answer is technically right answer, klokop's answer works — Soft
– Soft, Commented Jan 1, 2010 at 1:49

Waynn Lue · Accepted Answer · 2012-03-08 09:30:36Z

166

Apparently it's possible to do this in jQuery:

$("#tabs").css("cssText", "height: 650px !important;");

Src: http://bugs.jquery.com/ticket/2066

edited Mar 8, 2012 at 9:30

Waynn Lue

11.4k8 gold badges53 silver badges77 bronze badges

answered Dec 31, 2009 at 19:42

klokop

2,4102 gold badges19 silver badges22 bronze badges

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

6 Comments

ccov77 Over a year ago

Although, you can do $(elem).css('cssText', $(elem).css('cssText') + "your new css") right? ;)

Diffy Over a year ago

What is cssText here?

klokop Over a year ago

@Diffy, cssText is the 'cssText' property of the 'style' property. (ie, element.style.cssText)

Vincent Tang Over a year ago

I had to set both height and width using this method, you have to write it as a one liner. Example $('img').css('cssText', "max-width: " +ui.value + 'px !important;' + "max-height: "+ui.value + 'px !important;');

Shadi Alnamrouti Over a year ago

@Juan Although it will bring you also non inline styles. You will end up with a newspaper of CSS.

|

Burner · Accepted Answer · 2014-05-05 12:16:10Z

7

I solved this problem with:

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

So no inline-Style is lost, an the last overrides the first

answered May 5, 2014 at 12:16

Burner

1,0993 gold badges22 silver badges45 bronze badges

Comments

user3711819 · Accepted Answer · 2017-09-12 11:03:15Z

6

It is also possible to add more important properties:

inputObj.attr('style', 'color:black !important; background-color:#428bca !important;');

answered Sep 12, 2017 at 11:03

user3711819

631 silver badge2 bronze badges

Comments

Murat Kezli · Accepted Answer · 2018-11-25 23:53:56Z

6

var tabsHeight = 650;

$("tabs").attr('style', 'height: '+ tabsHeight +'px !important');

OR

#CSS
.myclass{height:650px !important;}

then

$("tabs").addClass("myclass");

edited Nov 25, 2018 at 23:53

answered Nov 25, 2018 at 23:48

Murat Kezli

3273 silver badges6 bronze badges

Comments

Vincent Tang · Accepted Answer · 2018-06-28 20:53:50Z

2

If you need to have jquery use !important for more than one item, this is how you would do it.

e.g. set an img tags max-width and max-height to 500px each

$('img').css('cssText', "max-width: 500px !important;' + "max-height: 500px !important;');

answered Jun 28, 2018 at 20:53

Vincent Tang

4,1966 gold badges52 silver badges72 bronze badges

Comments

Bernesto · Accepted Answer · 2019-02-13 04:32:26Z

2

For those times when you need to use jquery to set !important properties, here is a plugin I build that will allow you to do so.

$.fn.important = function(key, value) {
    var q = Object.assign({}, this.style)
    q[key] = `${value} !important`;
    $(this).css("cssText", Object.entries(q).filter(x => x[1]).map(([k, v]) => (`${k}: ${v}`)).join(';'));
};

$('div').important('color', 'red');

answered Feb 13, 2019 at 4:32

Bernesto

1,45618 silver badges20 bronze badges

Comments

Will Meier · Accepted Answer · 2018-07-12 20:36:33Z

0

If you really need to override css that has !important rules in it, for instance, in a case I ran into recently, overriding a wordpress theme required !important scss rules to break the theme, but since I was transpiling my code with webpack and (I assume this is why --)my css came along in the chain after the transpiled javascript, you can add a separate class rule in your stylesheet that overrides the first !important rule in the cascade, and toggle the heavier-weighted class rather than adjusting css dynamically. Just a thought.

answered Jul 12, 2018 at 20:36

Will Meier

5385 silver badges13 bronze badges

Comments

Marc W · Accepted Answer · 2009-12-31 17:10:37Z

-3

You don't need !important when modifying CSS with jQuery since it modifies the style attribute on the elements in the DOM directly. !important is only needed in stylesheets to disallow a particular style rule from being overridden at a lower level. Modifying style directly is the lowest level you can go, so !important has no meaning.

answered Dec 31, 2009 at 17:10

Marc W

19.3k4 gold badges63 silver badges71 bronze badges

4 Comments

Quentin Over a year ago

Unless you want to override an existing !important rule…

Paul D. Waite Over a year ago

Yeah: if there’s an !important in the stylesheet that you’re trying to override, you’d need it in $().css().

Makyen Over a year ago

As the other comments have implied, this is just wrong. While the style attribute overrides all CSS which is applied without !important, it does not affect CSS which is applied with !important.

nodws Over a year ago

Not only is this incorrect, but OP asked HOW not if he needed

Collectives™ on Stack Overflow

How to include !important in jquery

8 Answers 8

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

Comments

Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related