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, Dec 31 '09 at 17:04
Though Marc W's Answer is technically right answer, klokop's answer works — Soft, Jan 01 '10 at 01:49

score 166 · Accepted Answer · edited Mar 08 '12 at 09:30

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 08 '12 at 09:30

Waynn Lue

11,344
8
51
76

answered Dec 31 '09 at 19:42

klokop

2,414
2
18
22

5

Although, you can do $(elem).css('cssText', $(elem).css('cssText') + "your new css") right? ;) – chesscov77 Apr 28 '14 at 11:41
3

What is cssText here? – Diffy Jun 27 '14 at 10:43
@Diffy, cssText is the 'cssText' property of the 'style' property. (ie, element.style.cssText) – klokop Jun 28 '14 at 12:23
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;');` – Vincent Tang Jun 28 '18 at 20:51
2

@Juan Although it will bring you also non inline styles. You will end up with a newspaper of CSS. – Shadi Alnamrouti Sep 17 '18 at 13:02
hah, the comments here seem to be worth upvoting.. @ShadiNamrouti.. well said..every one- as said.. I did end up with _NewsPaper_ of _CSS_ .. was playing with some jquery-ui .. – Irf Aug 28 '19 at 09:27

score 7 · Answer 2 · answered May 05 '14 at 12:16

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 05 '14 at 12:16

Burner

981
19
41

score 6 · Answer 3 · answered Sep 12 '17 at 11:03

6

It is also possible to add more important properties:

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

answered Sep 12 '17 at 11:03

user3711819

63
1
2

Murat Kezli · Answer 4 · 2018-11-25T23:53:56.607

6

var tabsHeight = 650;

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

OR

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

then

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

edited Nov 25 '18 at 23:53

answered Nov 25 '18 at 23:48

Murat Kezli

187
2
5

score 2 · Answer 5 · answered Jun 28 '18 at 20:53

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 '18 at 20:53

Vincent Tang

3,758
6
45
63

score 2 · Answer 6 · answered Feb 13 '19 at 04:32

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

score 0 · Answer 7 · answered Jul 12 '18 at 20:36

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.

score -3 · Answer 8 · answered Dec 31 '09 at 17:10

-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 '09 at 17:10

Marc W

19,083
4
59
71

54

Unless you want to override an existing !important rule… – Quentin Dec 31 '09 at 17:21
2

Yeah: if there’s an `!important` in the stylesheet that you’re trying to override, you’d need it in `$().css()`. – Paul D. Waite Dec 31 '09 at 17:34
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`. – Makyen Feb 21 '18 at 19:21
2

Not only is this incorrect, but OP asked HOW not if he needed – nodws Jun 12 '18 at 16:42

How to include !important in jquery

8 Answers8

Linked

Related