How to remove inline style in jquery

satinder singh / Updated : / 0 Comments

Remove Inline Style: 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. And this 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 a few lines of code. So later we can add our own styling CSS property to make it look as we want.

The different approach to clear inline style using jQuery.

  • How in jQuery Remove all inline style.
  • How in jQuery Remove specific inline style.

Let’s see both approaches one by one.

# How in jQuery Remove all inline style.

To remove all inline style we use jQuery removeAttr() 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.

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 clear all the inline style property of our div element. i.e foo

$("#btn_1").on('click', function() {
 $("#foo").removeAttr("style");
});
Try It Yourself ⇒

# How in jQuery Remove specific inline style.

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 width from inline style, or if we want to remove 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.

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", "");
});
Try It Yourself ⇒

 

Conclusion: Here we learn about jQuery  .removeAttr() and .CSS() method, by using which we able to remove style attribute or specific property respective like height,width, color etc.

Other Reference:

You can also check these articles:

  1. Preview Image before upload it with jQuery in Asp.net.
  2. How to get the filename, size, type count in jQuery [input file, File Api].
  3. Create dynamic HTML table using jquery.
  4. How to remove table row tr in jquery on button click.
  5. Jquery: How to disable Button, Div, Anchor tag.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!


Post Comment


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