In CSS !important is used to increase the priority of a CSS property. This ignores the overriding properties.
In jQuery, you can use the css() method to manipulate style property of the selector but this doesn’t allow to set !important to property.
For example –
$('#txt').css('width', '100px !important');
The above code doesn’t work when you run it.
In this tutorial, I show how you can add !important to CSS property with jQuery.
Table of Content
- Using addClass() – Adding a New Class Without Replacing Existing Classes
- Manipulating Element Attributes with attr() Method
- Managing CSS Styles with the cssText Property
- Conclusion
1. Using addClass() – Adding a New Class Without Replacing Existing Classes
To add the !important to a CSS property using jQuery, we’ll take a slightly different approach. Instead of directly manipulating the style property, we’ll add a new class to the selected element. Importantly, this won’t replace any existing classes on the element.
Call addClass() method on the selector and specify yours class-name in the method.
Syntax –
$( selector ).addClass( class-name );
Example
<style type='text/css'>
.textbox{
width: 150px !important;
}
</style>
<script>
$(document).ready(function(){
// Add .textbox class
$("#txt").addClass('textbox');
});
</script>
2. Manipulating Element Attributes with attr() Method
The attr() method is used to get or set the value of an element attribute. Using this method you can modify the style attribute of an element and include the !important declaration.
Syntax –
Get attribute value
$( selector ).attr( 'Attribute-name' );
Set attribute value
$( selector ).attr( 'Attribute-name', value );
Example
Using attr() to edit element style attribute and specifying value with !important.
<script>
$(document).ready(function(){
$('#txt').attr('style', 'width: 150px !important');
});
</script>
This adds a new property to the element if it not specified otherwise ignores the existing property.
3. Managing CSS Styles with the cssText Property
In jQuery, you can utilize the cssText property to manipulate multiple CSS styles or retrieve the CSS styles of a selector as a string. This property enables you to efficiently set or get a combination of styles.
Set style Syntax –
$( selector ).css( { 'cssText', 'CSS style' } );
Example
<style type='text/css'>
.textbox{
width: 150px !important;
}
</style>
<script>
$(document).ready(function(){
// Change width
$('#txt').css({
'cssText': 'width: 220px !important'
});
});
</script>
4. Conclusion
In this tutorial, I have shown you multiple ways to apply the !important declaration to CSS properties using jQuery. You now have the flexibility to choose the method that best suits your needs and project structure. These techniques empower you to take control of your CSS styles and ensure they behave as expected in your web projects.
