Overriding !important with css or jquery

56
votes

(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
5
jquerycsscontent-script
Did you search SO? I found stackoverflow.com/questions/462537/… - Šime Vidas
@Š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
Possible duplicate of How to apply !important using .css()? - Prateek

5 Answers

123
votes

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.

51
votes

You can also do this:

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

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

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

0
votes

we can just add class using jquery 

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

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