jQuery remove inline style CSS: Here in this article, we learn how in jQuery we remove inline style CSS property. While developing a website if we have used any themes for our design, we have found that our HTML tags may be div tag or any other element have some unnecessary inline style.
These inline style makes our page design dirty. To fix this design issue we need to remove all the inline style, and doing this manually is a tedious task. But with jQuery, we can achieve it with few lines of code. So later we can add our own CSS styling to make it look like as per our requirement.
Two different approach to clear inline style CSS in jQuery.
- Use removeAttr() to remove all inline style attribute.
- Use css() to remove specific CSS property.
# Using jQuery .removeAttr() to remove all inline style.
To remove or delete all the inline style property from our webpage, we simply use jQueryremoveAttr()
method. Using this method it will remove one or more attribute from the selected elements.
Here we have a div tag contain many CSS property as written below, And now using .removeAttr() will remove all its inline style. Basically we code in jQuery to clear CSS all properties.
HTML:
<div id="foo" style="color:blue;height:100px;width:200px;background-color:#e2e2e2;">
<p>hello world</p>
</div>
<button id="btn_1">Remove All Inline Style</button>
<button id="btn_2">Remove Inline Style width</button>
jQuery:
Heres the jquery code where on button click, we remove all the inline style property of our div element.$("#btn_1").on('click', function() {
$("#foo").removeAttr("style");
});
View Demo# Using jQuery .css() method to remove specific CSS property.
In the previous example, we learn how to clear all inline style property. But what if we want to remove one specific property. For example, if we want to remove only width from inline style, or if we want to remove only height from it.For that we use the jQuery .CSS() method, this method sets or returns one or more style properties for the selected elements. As we want to remove width property so we use .css() method and set width as blank. By doing this it will remove width from the inline style. Same we can do for height, top , left position respectively
jQuery: Here on button click we use .css() method to remove width from inline style.
Code as written below.
$("#btn_2").on('click', function() {
$("#foo").css("width", "");
});
View Demo
Conclusion: Here we learn about how to use .removeAttr() and .CSS() method to remove or manipulate inline CSS style. And able to customize our web page styling. Inshort we able to remove all style attribute or specific CSS property like to modify height, width, color etc.
Other Reference:
You can also check these articles:
Post Comment
Your email address will not be published. Required fields are marked *