Overriding !important with css or jquery

Wilson picture Wilson · Aug 15, 2012 · Viewed 79.6k times · Source

(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

Answer

Šime Vidas picture Šime Vidas · Aug 15, 2012

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.