Overriding !important with css or 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.


You can also do this:

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

we can just add class using jquery

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

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

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