Overriding !important with css or jquery
JqueryCssContent ScriptJquery Problem Overview
(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
Jquery Solutions
Solution 1 - Jquery
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.
Solution 2 - Jquery
You can also do this:
$(".someclass").css("cssText", "border: none !important;");
Solution 3 - Jquery
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");
Solution 4 - Jquery
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;");
Solution 5 - Jquery
we can just add class using jquery
$("someclass").addClass("test");
<style>
.test{
border:none !important;
}
</style>