Adding !important with jQuery [duplicate]

Question

I ran into an issue that I can't quite explain.

I wrote a function in in that function I was adding some inline styles to an element:

myEm.css({"margin":"0", "position":"fixed", "top":"50px", "left":"50px"});

It worked fine, however I noticed that this element already had some margin set in a CSS file and it used !important, so the only way I would be able to overwrite is by changing my code to

myEm.css({"margin":"0 !important", "position":"fixed", "top":"50px", "left":"50px"});

However, when I do that the entire margin attribute is dropped. Seems a bit odd, but after testing I suspect the exclamation mark is a culprit. Do I need to escape it somehow of use an encoded character? What am I missing?

You add a CSS style with !important and the CSS class to the element. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Nov 21, 2014 at 17:03
why setting manually the CSS ? why not create a new CSS rule and apply it when you want ? — Gabriele Petrioli
– Gabriele Petrioli, Commented Nov 21, 2014 at 17:05
You can probably see your answer here: stackoverflow.com/questions/2655925/… — marvs
– marvs, Commented Nov 21, 2014 at 17:12

Selvakumar Arumugam · Accepted Answer · 2014-11-21 18:10:22Z

4

Best way is to create a new CSS style with margin !important and add the CSS to the element.

CSS:

.zeroMargin { margin: 0 !important; }

and then in JS:

myEm.css({"position":"fixed", "top":"50px", "left":"50px"}).addClass('zeroMargin');

Alternatively, You can also do that entirely with JS using cssText

myEm.css("cssText", "margin:0 !important;position:fixed;top:50px;left:50px;"});

This is equivalent to setting the style.cssText property of that element. So you may not need an !important in that case..

To preserve you can use a function like below,

$('#cssTest').css('cssText', function(i, v) {
  return this.style.cssText + ';border-color: blue !important;';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="cssTest" style="border: 1px solid red !important; width: 100px; height: 100px;"></div>

edited Nov 21, 2014 at 18:10

answered Nov 21, 2014 at 17:06

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

Comments

Joanvo · Accepted Answer · 2014-11-21 17:04:25Z

3

Do it with a javascript function that way:

myEm[0].style.setProperty('margin', '0', 'important');

answered Nov 21, 2014 at 17:04

Joanvo

5,8272 gold badges27 silver badges36 bronze badges

1 Comment

CFitz Over a year ago

This was the only solution that worked for me when trying to change the CSS of a select2 element. (In my scenario, the command was of the format

$('span.select2-selection.select2-selection--single[aria-labelledby="select2-actual_element_id_goes_here-container"]')[0].style.setProperty('border-color', 'red', 'important');

.)

Community · Accepted Answer · 2017-05-23 10:33:41Z

0

Here is a handy trick I found on another post:

myEm.attr('style', function(i,s) { return s + 'margin: 0 !important;' });

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Nov 21, 2014 at 17:19

Salil Dabholkar

6223 silver badges7 bronze badges

2 Comments

Joanvo Over a year ago

This will not override other style set on margin attribute, you might end up with two values as margin attribute both set as important!

Salil Dabholkar Over a year ago

The question said that the original margin was set through a css file

Collectives™ on Stack Overflow

Adding !important with jQuery [duplicate]

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Related