jQuery Remove Style Attribute with Examples

In this tutorial, learn how to remove style attribute from an element in jQuery. The short answer is to use the removeAttr() function and pass the style attribute as its argument.

You can also use the attr() or prop() function of jQuery to perform this task. Let’s find out with the examples given below.

Method 1: jQuery Remove Style Attribute with removeAttr() Function

To remove the style attribute from an element, you can use the removeAttr() function that takes a single argument as style attribute to remove. It will remove all the CSS applied to the element using the style attribute.

Output

This is a paragraph.


The above example contains the paragraph element text content and the button element. The text content contains some CSS applied to it using the style attribute. When you click the button element, the removeAttr() function removes the style attribute along with the CSS present in it.

Method 2: Using prop() Function

If you want to remove the style attribute from the paragraph element, you can use the prop() function and pass two arguments to it in comma separation. The first argument is the style attribute within double quotes (" " ). The second is the blank content within the double quotes (” “) to make the attribute blank.

Output

This is a second paragraph.


To remove all the CSS applied to the element using the style attribute, you can click the button given above. The resulting output after the button click is the text content without any CSS.

Method 3: How to Remove Style Attribute Using attr() Function of jQuery

In addition to the above examples, you can also use attr() function of jQuery to remove style attribute from an element. It takes the same two arguments as we are using in the above example. That means, the first is the "style" attribute and the second is blank quotes (" ").

Output

This is a third paragraph.


Now, The above example contains some text content with some CSS applied using the style attribute. You can click the button given above to remove all the CSS from the element.

You May Also Like to Read

Reference

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.