jquery set css property important (add !important)

In CSS !important is used to increase the based on the priority of a CSS property. This ignores the overriding some properties.

How to add !important to CSS property with jQuery?

In jQuery, you can use the simple css() method to manipulate style property of the selector but this doesn’t allow to set !important to property.

For example – how to apply !important in javascript?

$('#unicodedata').css('width', '100px !important');

The above source code doesn’t work when you run it.

In this article, I learn to how you can add !important to CSS property with jQuery & JavaScripts.

1. Using Add class

This adds a included new class to the using selector HTML element as well as doesn’t replace the existing CSS class from the HTML element.

Here simply, Call addClass() method on the jquery selector and custom yours CSS your-class-name in the method.

Add class selector Syntax –

$( selector ).addClass( your-class-name );

Example : How to include !important in jquery?

<style type='text/css'>
.custom-mycl{
  width: 245px !important;
}
</style>
<script>
$(document).ready(function(){

    // Add .custom-mycl class
    $("#unicodedata").addClass('custom-mycl');
});
</script>

Also Read: How to get the class name using Jquery Example with demo?

2. Using attr()

This method gets or sets the value of the element attribute.
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(){
    $('#unicodedata').attr('style', 'width: 245px !important');
});
</script>

This adds a new property to the element if it not specified otherwise ignores the existing property.

3. Using cssText

The pure cssText some property supports setting multiple based CSS styles as well as get the applay CSS style of any html selector as a data string.

Set style Syntax –

$( selector ).css( { 'cssText', 'YOUR Custom CSS style' } );

Example : How to apply !important using .css()?

<style type='text/css'>
.custom-mycl{
  width: 245px !important;
}
</style>
<script>
$(document).ready(function(){

    // Update width
    $('#unicodedata').css({
        'cssText': 'width: 220px !important'
    });
});
</script>


Related FAQ

Here are some more FAQ related to this Article:

  1.   Bootstrap Toggle switch with ajax update to mysql in PHP
  2.   Time-Range-Picker jquery time range picker example - jQueryUI TimeRangePicker
  3.   Simple PHP Laravel Pagination script
  4.   Ajax File Upload without refreshing using jQuery and PHP
  5.   File upload size validation using Laravel 5.7
  6.   jquery Multiple step form validation
  7.   jQuery Show Popup Message Few Seconds and Auto close
  8.   jquery multiselect dropdown checkbox with search
  9.   JavaScript JSON Encoder and Decoder Example
  10.   Laravel Edit DropDown Option Seleted Example