During JavaScript web application development, we may get a requirement to remove all styles from an element. This article will share how to remove all styles from an element using JavaScript.
How to remove all styles from an element using JavaScript
To remove all styles from an element, we have the following two solutions:
- Using the removeProperty() method
- Using the removeAttribute() method
Now, we will take a closer look at each solution with specific examples for each of them.
Using the removeProperty() method
The removeProperty() method is used to remove the specified CSS property.
Syntax:
object.removeProperty(name)
Parameter:
- name: the name of the specified CSS property.
To remove all styles from an element using the removeProperty() method, you need to know the index of the styleSheets and the index of the cssRules.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
#text {
color: #1873d3;
font-style: italic;
}
#btn {
font-weight: bold;
}
</style>
</head>
<body>
<h1 id = "text">LearnShareIT</h1>
<button id = "btn" onclick="removeStyle()">Remove Styles</button>
<script>
function removeStyle() {
// Get the cssRules of the first styleSheets
const myRules = document.styleSheets[0].cssRules;
// Get the second cssRule in the first styleSheets
const property = myRules[1].style;
// Remove all styles from an element whose id is "text"
const value = property.removeProperty("color");
const value1 = property.removeProperty("font-style");
}
</script>
</body>
</html>Output:
In this example, we want to remove all styles from an element whose id is “text”.
First, we use a document.styleSheets[0] .cssRules, this will return ‘myRules’ which is the cssRules of the first styleSheets.
Then myRules[0].style will return a CSSStyleDeclaration object on the second cssRule in the first styleSheets of the HTML document, called ‘property’, this is the cssRule of the element with the id “text”.
Finally, we call the removeProperty() method on all the properties contained in the newly received CSSStyleDeclaration object to remove all these properties.
Using the removeAttribute() method
The removeAttribute() method removes an attribute from an element.
Syntax:
element.removeAttribute(name)
Parameter:
- name: The name of the attribute.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
#btn {
font-weight: bold;
}
</style>
</head>
<body>
<h1 id = "text" style="color: #1873d3; font-style: italic">LearnShareIT</h1>
<button id = "btn" onclick="removeStyle()">Remove Styles</button>
<script>
// Remove all styles from an element whose id is "text"
function removeStyle() {
const property = document.getElementById("text").removeAttribute("style");
}
</script>
</body>
</html>Output:
To remove all styles from an element using the removeAttribute() method, we need to use the getElementById() method to get an element with id “text”, then use the removeAttribute() method with the “style” parameter.
The case of setting properties using class.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.text {
color: #1873d3;
font-style: italic;
}
#btn {
font-weight: bold;
}
</style>
</head>
<body>
<h1 id = "text" class = "text">LearnShareIT</h1>
<button id = "btn" onclick="removeStyle()">Remove Styles</button>
<script>
// Remove all styles from an element whose id is "text"
function removeStyle() {
const property = document.getElementById("text").removeAttribute("class");
}
</script>
</body>
</html>Output:
Summary
This article has shown how to remove all styles from an element using JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer. Thank you for reading!
Maybe you are interested:
- Get all Elements in a Form using JavaScript
- Remove all Event Listeners from an Element using JavaScript
- Append text to Textarea using JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP