How to add CSS !important Style Property using jQuery

I have previously shared few examples here on my blog that explained how to add or override the !important property dynamically in JavaScript. Now in this post I’ll show you how to add the CSS !important property to an element dynamically using jQuery.

Add !important style to element using jQuery

The !important property in CSS, as you know, is often used to ignore the rules (or styles) applied to an element. You can define !important property inside the <style> tag, or it can be applied using inline style and even dynamically using jQuery.

The !important property must be applied immediately after any style property. For example,

<style>
    div {
        display: block !important;
        color: red;
    }
</style>

<div style='display: none;'> 
    Some content here...
</div>

Try it

In the above example, even though I have altered the display property of the <div> as none using inline style, the element will show, since I have applied !important to the display property inside the <style> tag. CSS will give importance to the value with !important.

Now, let’s see how this can be done dynamically using jQuery.

1) Using jQuery .attr() Method

You can use the .attr() method (the attribute method) to add or alter style properties to any element in jQuery.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Add !important Property using jQuery</title>
   
    <style>
        div {
            display: block;
            color: red !important;
        }
    </style>
</head>
<body>
    <div>
        Some content here ...
    </div>
    
    <p>
        <input type='button' value='Click it' id='bt'>    
    </p>
</body>

<script>
    $('#bt').click(function () {
        $('div').attr('style', 'color: blue !important');
    });
</script>
</html>

Try it

I have a <div> element on my web page and I have applied style to the element inside the <style> tag. The element has display: block; and the element’s colour is red. The colour value, in particular, is prefixed with the !important property.

I want the change the colour of the element (with !important), overriding the value that I have applied inside the <style> tag.

Now, to apply the !important property dynamically using jQuery, I am using the .attr() method. This function allows me to alter or add new CSS properties to any element during runtime.

In the above example, the .attr() method will alter every <div> element on your web page. In case, you want to alter a particular element, then give the element a unique id and use the id with the .attr() method. For example,

<div id='theDiv'>
    Some content here …
</div>

$('#bt').click(function () {
    $('#theDiv').attr('style', 'color: blue !important');
});

2) Using jQuery .cssText property

In-addition to the .attr() method, you can use cssText property of .css() method. For example,

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Adding !important to element using jQuery cssText property</title>
   
    <style>
        div {
            display: block;
            color: red !important;
        }
    </style>
</head>
<body>
    <div id='theDiv'>
        Some text here ...
    </div>
    
    <p>
        <input type='button' value='Click it' id='bt'>    
    </p>
</body>

<script>
    $('#bt').click(function () {
        $('#theDiv').css(
            {
                'cssText': 'color: blue !important'
            }
        );
    });
</script>
</html>

Try it

The result will be the same as the first example. The colour of the element is overridden using the !important property. I have used the cssText property to add the !important property to an element.

You can use the cssText property to define multiple style properties to an element.

3) Using jQuery .addClass() Method

The .addClass() method is another jQuery method, that you can use to add (and even remove) the CSS !important property to an element.

Remember, the .addClass() method will not replace any previously defined class, it simply adds another class to the element.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Add !important property to element using jQuery addClass()</title>
   
    <style>
        .def {
            display: block;
            color: red !important;
            border: solid 1px gray;
            padding: 0 !important;
        }
		
        .newClass {
            display: block;
            color: blue;
            padding: 10px !important;
        }
    </style>
</head>
<body>
    <div class='def' id='theDiv'>
        Some text here ...
    </div>
    
    <p>
        <input type='button' value='Click it' id='bt'>    
    </p>
</body>

<script>
    $('#bt').click(function () {
        $('#theDiv').addClass('newClass');
    });
</script>
</html>

Try it

Using the .addClass() method, I have applied a new class to the <div> element (it had only the .def class before) and applied the CSS !important as new padding rules.

As I said, the .addClass method does not change the previous class name it adds a new class to the element.

Conclusion

Use the CSS !important property carefully in your web application. Too many of it can give unwanted result and it might tempt you to randomly add more properties dynamically to override styles. However, if it necessary use it properly and I have shared 3 different methods here. Hope you’ll find the examples useful.

← PreviousNext →