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 stackoverflow.com/questions/462537/… — Šime Vidas
– Šime Vidas, Commented Aug 15, 2012 at 1: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
– Michael Scheper, Commented Apr 21, 2015 at 22:30

Šime Vidas · Accepted Answer · 2012-08-15 01:41:44Z

130

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, 2012 at 1:41

answered Aug 15, 2012 at 1:31

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

6 Comments

stuartdotnet Over a year ago

Fails in IE8 with "Object doesn't support this property or method"

Šime Vidas Over a year ago

@StuartDobson Yes, fails in IE8 -.-

Michael Scheper Over a year ago

Fails in Mosaic 2, too. :-P

yaru Over a year ago

It's a great answer with one caveat - if $('#container).style does not work - use $('#container)[0].style instead

Šime Vidas Over a year ago

@yaru Yes, the style property is only available on the DOM element itself, not on the jQuery object.

|

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

52

You can also do this:

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

answered Sep 12, 2014 at 23:34

9ete

3,8021 gold badge36 silver badges34 bronze badges

1 Comment

Miguel Q Over a year ago

this will overwrite the style

Pallavi Dwivedi · Accepted Answer · 2018-06-25 09:06:39Z

16

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, 2018 at 9:06

answered Nov 15, 2017 at 9:02

Pallavi Dwivedi

3063 silver badges12 bronze badges

1 Comment

melvin Over a year ago

Will replace all other styles

Shubham Chopra · Accepted Answer · 2019-05-24 07:20:55Z

1

we can just add class using jquery

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

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

answered May 24, 2019 at 7:20

Shubham Chopra

1,72620 silver badges32 bronze badges

1 Comment

ADTC Over a year ago

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. 😒

user1548843 · Accepted Answer · 2015-02-24 12:42:33Z

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, 2015 at 12:42

user1548843

67012 silver badges20 bronze badges

answered Feb 24, 2015 at 12:16

user2244656

93 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-12-03 20:13:47Z

-1

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>

edited Dec 3, 2022 at 20:13

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Nov 28, 2022 at 7:57

Rana Abdullah

214 bronze badges

Collectives™ on Stack Overflow

Overriding !important with css or jquery

6 Answers 6

6 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related