How to add !important to CSS property using jQuery

In this tutorial, I show you how to add !important to CSS property using jQuery. When you have to increase the priority of any style property in CSS important keyword is used.

The important property overrides the existing style on the element and force to apply the important style. To mark any style as important the “!important” keyword is used immediately before the semicolon like below.

Syntax –

<CSS style> !important;

Example –

.site-header {Color: #ff0000 !important;}

In the above example I have applied the red color (color code #ff000) to site header using !important keyword so the existing color has been override to red.

Now the question is how to add !important to CSS style using jQuery at run time –

How to add !important to CSS style using jQuery

There are 4 methods which can be used to add !important CSS style using jQuery –

  1. attr()
  2. addclass()
  3. cssText
  4. css()

1. attr()

The attr() method in jQuery get or set attributes and values of the selected elements.

Syntax –

Get attribute value

$(‘selector’).attr(‘attributeName’);

It returns the value of the selected element.

Set attribute value

$(‘selector’).attr(‘attributeName’, value);

It set the value to selected elements.

Example –

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to add !important to css style using jquery</title>
<style>
 .site-header{
   color:green;
   width:200px;
   font-size:25px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  //apply important to color
  $('.site-header').attr('style', 'color:red !important');
});
</script>
</head>
<body>
<div class="site-header">
  geeks tutorials
</div>
</body>
</html>

In the above example “site-header” div class color has been set to important red using the attr() method. It ignores the existing color in the class and applies an important style.

See the below output it adds the new color style to the property and overrides the existing style.

Output –

How to add important to css style using jquery

 

Note – In the below methods, I have used the same example only the method name is changed.

2. addclass()

The addclass() method adds the new class to the selector element along with its existing class if any. To add the class use addclass() method and specify your class name.

Syntax –

$('selector').addclass('site-header');

The class should exist in your CSS otherwise it adds the class but no style has been applied.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
 .site-header{
   color:green;
   width:200px;
   font-size:25px;
}
.bgcolor{
  background-color: grey !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
 $('site-header').addclass('bgcolor');
});
</script>
</head>
<body>
  <div class="site-header">
   geeks tutorials
  </div>
</body>
</html>

The addclass() method adds the “bgcolor” class to the site-header div and in that class you can use !important with any of the CSS property.

3. cssText

The cssText property gets or sets the CSS style of the selector as a string. Using this you can set multiple styles.

Syntax –

  $('selector').css({'cssText' : 'Style in string'});

Example –

<!DOCTYPE html>
<html lang="en">
<head>
  <title>How to add !important to css property using jquery</title>
<style>
.site-header{
  color:green;
  width:200px;
  font-size:25px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function(){
   //apply important to color
   $('.site-header').css({
     'cssText' : 'font-size:20px;color:yellow !important;'
  });
});
</script>
</head>
<body>
<div class="site-header">
  geeks tutorials
</div>
</body>
</html>



4. css ()

The css() method is used to set and get style on the selector element.

Syntax –

Return the CSS property value:

$("selector").css(property);

Set the CSS property and value:

$("selector").css(property,value);

The css() method manipulates the CSS style property of the selector but this doesn’t allow to set !important to the property. The below code doesn’t work at run time –

$(".site-header").css("color", "red !important");

but still, it can be achieved with some limitations see below example –

Example –

<!DOCTYPE html>
<html lang="en">
<head>
 <title>How to add !important to css style using jquery</title>
<style>
.site-header{
  color:green;
  width:200px;
  font-size:25px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
 //Add important to css
 $(".site-header").css("color", "red", "important");
});
</script>
</head>
<body>
<div class="site-header">
 geeks tutorials
</div>
</body>
</html>


Note – Here I have used three parameters and in the third parameter I passed “important” this only works with modern browsers like – chrome, edge, and firefox.

Conclusion

This is how by using any of the above methods you can add the !important to CSS property using JQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *