CODEWITHSUNDEEP
jquerycsscontent-script
Wilson
Wilson

Reputation: 8768

Overriding !important with css or jquery

(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

Upvotes: 63

Views: 91107

Answers (6)

Rana Abdullah
Rana Abdullah

Reputation: 21

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>

Upvotes: -1

Shubham Chopra
Shubham Chopra

Reputation: 1737

we can just add class using jquery 

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

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

Upvotes: 1

Pallavi Dwivedi
Pallavi Dwivedi

Reputation: 196

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

Upvotes: 15

user2244656
user2244656

Reputation: 9

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

Upvotes: 0

9ete
9ete

Reputation: 3762

You can also do this:

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

Upvotes: 51

Šime Vidas
Šime Vidas

Reputation: 185933

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.

Upvotes: 130

Related Questions