How to apply ! CSS import via jQuery?

Question

I’m trying to apply style to my element and define its importance in this way:

$('div').css('height','50px!important');

But it doesn’t work, which would be the right way?

Answer 1

It is not working because Jquery does not recognize the ! Mportant statement. Simply put, you can do it this way:

$('div').attr('style', 'width: 50px!important');

This should solve, but will overwrite the previous styles that are set. To avoid this, this will keep the previous styles and add new ones:

$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });

Answer 2

The best way to apply CSS rules is always by using classes.

So it’s best to define a class in CSS

.minhaClasse {
    width: 50px!important
}

and add the class with:

$('#elem').addClass('minhaClasse');

Apart from this ideal way, and taking into account that jQuery is javascript may be better, in this case use the style and particularly the setProperty that has a parameter for the importance.

So you could use:

$('#elem')[0].style.setProperty('width', '50px', 'important');

or

document.getElementById('elem').style.setProperty('width', '50px', 'important');

Example

Answer 3

You can use it this way:

$(".prodMenor:eq(6)").css("cssText", "margin-right: 0 !important");

Caution: in this case you need to set all the desired properties.

See more in http://bugs.jquery.com/ticket/2066

If you want a function to apply the !important separately, has a here.

Answer 4

You can use the function .attr() jQuery:

$('.prodMenor:eq(6)').attr('style','margin-right: 0 !important');

Example: FIDDLE

Answer 5

I just created a function that does exactly what the question asks:

// jquery-css-important.js v1
jQuery.fn.extend({
    cssImportant: function(key, val) {
        let $div = $('<div>');
        $div.css(key, val);
        let style = $div.attr('style');
        $div.remove();
        let $this = $(this);
        if (style) {
            $this.css(key, val);
            let oldStyle = $this.attr('style');
            $this.attr('style', oldStyle.replace(style, style.replace(';', '!important;')));
        };
        return $this;
    }
});

The other answers do not exactly address what was requested. The use of classes is the best of the worlds because it is the right way, but it does not solve all cases as, for example, an item already have ! Import within the style. Using attr is bad because it moves the whole attribute which means discarding other properties. Adding to the end of the style attribute is also bad because without a regular expression check or something like that you can end up with two equal properties by polluting the code:

<div style="width: 100px; width: 110px!important;"></div>

My code uses jQuery itself to check for duplicate css in the style attribute and then increments with ! Important. This way the usage is as simple as normal $.css and the rest of the code continues to work normally.

The use is simple:

$('div').cssImportant('margin', '10px');

I did not support objects so to add more than one item you need more than one line.