Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove all style attributes using jQuery?
To remove an attribute from each tag using jQuery, use the removeAttr() method and use the Universal Selector. Let us see how to use the method to remove all style attributes. Use the universal selector also to select all the elements.
The removeAttr() method removes the specified attribute from each element in the matched set. When combined with the universal selector * or specific selectors, you can target all elements or specific elements to remove their style attributes.
You can try to run the following code to learn how to remove all style attributes using jQuery ?
Example
This example demonstrates how to remove style attributes from specific elements (h1 tags) when a button is clicked ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").removeAttr("style");
});
});
</script>
</head>
<body>
<h1 style="color:blue">This is heading</h1>
<p>This is demo text.</p>
<h1 style="color:red">This is heading</h1>
<p>This is demo text.</p>
<button>Remove Style</button>
<p>Click above to remove style attribute from all h1 elements.</p>
</body>
</html>
Remove All Style Attributes from All Elements
To remove style attributes from all elements on the page, use the universal selector * ?
$(document).ready(function(){
$("button").click(function(){
$("*").removeAttr("style");
});
});
After clicking the button, all inline style attributes will be removed from the selected elements. The elements will then use only the default browser styles or any external CSS rules that apply to them.
Conclusion
The jQuery removeAttr("style") method provides an easy way to remove inline style attributes from HTML elements, helping you clean up styling and rely on external CSS instead.
9K+ Views
