Overriding !important with css or jquery

Question

(This is using content scripts in a chrome extension)

I need to overwrite some css properties that the webpage has labeled as !important. Is this possible?

For instance, if I want to get rid of the border that is labeled important:

$(".someclass").css('border','none'); //does not work

Did you search SO? I found http://stackoverflow.com/questions/462537/overriding-important-style-using-javascript — Šime Vidas, Aug 15 '12 at 01:29
@ŠimeVidas: That question is about Javascript; this question is about jQuery. The solution may be the same in the end, but the question's author wouldn't've known that (nor did I), and I think most devs would agree it's best practice to use a jQuery solution, when one exists. — Michael Scheper, Apr 21 '15 at 22:30
Possible duplicate of [How to apply !important using .css()?](https://stackoverflow.com/questions/2655925/how-to-apply-important-using-css) — Prateek, Nov 19 '18 at 15:49

Šime Vidas · Accepted Answer · 2012-08-15T01:41:44.387

128

Here you go:

$( '.someclass' ).each(function () {
    this.style.setProperty( 'border', 'none', 'important' );
});

Live demo: http://jsfiddle.net/Gtr54/

The .setProperty method of an element's style object enables you to pass a third argument which represents the priority. So, you're overriding an !important value with your own !important value. As far as I know, it is not possible to set the !important priority with jQuery, so your only option is the built-in .setProperty method.

edited Aug 15 '12 at 01:41

answered Aug 15 '12 at 01:31

Šime Vidas

182,163
62
281
385

2

Fails in IE8 with "Object doesn't support this property or method" – Stuart Dobson May 14 '13 at 02:49
3

@StuartDobson Yes, fails in IE8 -.- – Šime Vidas May 14 '13 at 13:48
4

Fails in Mosaic 2, too. :-P – Michael Scheper Apr 21 '15 at 22:26
9

It's a great answer with one caveat - if `$('#container).style` does not work - use `$('#container)[0].style` instead – yaru Dec 07 '16 at 21:03
1

@yaru Yes, the `style` property is only available on the DOM element itself, not on the jQuery object. – Šime Vidas Dec 07 '16 at 21:17
bless you sir, bless you – Aug 16 '19 at 20:27

score 51 · Answer 2 · answered Sep 12 '14 at 23:34

51

You can also do this:

$(".someclass").css("cssText", "border: none !important;");

answered Sep 12 '14 at 23:34

9ete

3,692
1
34
32

7

this will overwrite the style – Miguel Mar 27 '15 at 13:13

Pallavi Dwivedi · Answer 3 · 2018-06-25T09:06:39.870

14

This should help.

$(".someclass").attr("style","border:none!important");

Updated, so as not to overwrite all styles:

var existingStyles = $(".someclass").attr("style");
$(".someclass").attr("style", existingStyles+"border:none!important");

edited Jun 25 '18 at 09:06

answered Nov 15 '17 at 09:02

Pallavi Dwivedi

186
2
12

1

Will replace all other styles – melvin Apr 12 '18 at 12:20

score 1 · Answer 4 · answered May 24 '19 at 07:20

1

we can just add class using jquery

$("someclass").addClass("test");

<style>
.test{
border:none !important;
}
</style>

answered May 24 '19 at 07:20

Shubham Chopra

1,678
17
30

This won't work with a dynamically generated style (such as height or color). It's just ridiculous that [jQuery devs are pitching this as a viable workaround.](https://bugs.jquery.com/ticket/11173) – ADTC Feb 15 '21 at 23:32

score 0 · Answer 5 · edited Feb 24 '15 at 12:42

0

there is also another way

$("#m_divList tbody").find("tr[data-uid=" + row.uid + "]").find('td').css("cssText", "color: red !important;");

css("cssText", "color: red !important;");

edited Feb 24 '15 at 12:42

user1548843

670
12
20

answered Feb 24 '15 at 12:16

user2244656

9
3

score -1 · Answer 6 · edited Dec 03 '22 at 20:13

Use this below code to override the important in jQuery.

<style>  
  div.woocommerce-variation-add-to-cart-disabled {
    display: none ! important;
  }
</style>

<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
  <script>
    jQuery(document).ready(function() {
      jQuery('.woocommerce-variation-add-to-cart').attr('style', 'display: block !important;');
    });
  </script>
</div>

Overriding !important with css or jquery

6 Answers6

Linked