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 CSS property using JavaScript?
To remove CSS properties using JavaScript, you can clean up unnecessary styles, improve performance, make code easier to maintain, and simplify debugging.
In this article, we'll explore different methods to remove CSS properties from HTML elements using JavaScript. We'll work with div and p elements that have various CSS properties applied.
Approaches to Remove CSS Properties
Here are five effective methods to remove CSS properties using JavaScript:
- Using the removeProperty() Method
- Using the setProperty() Method
- Using null Value
- Using the removeAttribute() Method
- By Removing Class
Using the removeProperty() Method
The removeProperty() method removes a specific CSS property from an element's inline styles. This is the most direct way to remove individual CSS properties.
Example
In this example, we remove the background color from a div element using removeProperty():
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ele {
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Remove CSS Property using removeProperty()</h3>
<div class="ele" style="background-color: red;"></div>
<br>
<button onclick="removeColor()">Remove Background Color</button>
<script>
function removeColor() {
document.querySelector(".ele")
.style.removeProperty("background-color");
}
</script>
</body>
</html>
Using the setProperty() Method
The setProperty() method can effectively remove CSS properties by setting their values to "none", "initial", or "unset".
Example
Here we remove a border by setting it to "none":
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ele {
width: 200px;
height: 200px;
background-color: blue;
border: 10px solid green;
color: white;
}
</style>
</head>
<body>
<h3>Remove CSS Property using setProperty()</h3>
<div class="ele"></div>
<br>
<button onclick="removeBorder()">Remove Border</button>
<script>
function removeBorder() {
document.querySelector(".ele")
.style.setProperty("border", "none");
}
</script>
</body>
</html>
Using Null Value
Setting a CSS property to null effectively removes it from the element's inline styles.
Example
This example removes the font-size property by setting it to null:
<!DOCTYPE html>
<html lang="en">
<body>
<h3>Remove CSS Property using Null Value</h3>
<div style="font-size: 3rem;">
Font size will be reduced.
</div>
<br>
<button onclick="removeSize()">Remove Font-Size</button>
<script>
function removeSize() {
document.querySelector('div')
.style.fontSize = null;
}
</script>
</body>
</html>
Using the removeAttribute() Method
The removeAttribute("style") method removes the entire style attribute, eliminating all inline CSS properties at once.
Example
This example removes all inline styles from a paragraph element:
<!DOCTYPE html>
<html lang="en">
<body>
<h3>Remove CSS Property using removeAttribute()</h3>
<p style="color: green;" class="para">
Click Remove to remove all CSS properties.
</p>
<br>
<button onclick="removeStyle()">Remove All Styles</button>
<script>
function removeStyle() {
document.getElementsByClassName("para")[0]
.removeAttribute("style");
}
</script>
</body>
</html>
By Removing Class
You can remove CSS properties by removing the CSS class that contains those properties using the classList.remove() method.
Example
This example removes styles by removing the CSS class:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.sample {
border: 10px green solid;
background-color: yellow;
padding: 20px;
}
</style>
</head>
<body>
<h3>Remove CSS Property by Removing Class</h3>
<button onclick="removeClass()">Remove Class</button>
<div class="sample" id="example">
We are removing the class.
</div>
<script>
function removeClass() {
document.getElementById("example")
.classList.remove('sample');
}
</script>
</body>
</html>
Method Comparison
| Method | Target | Scope | Best Use Case |
|---|---|---|---|
removeProperty() |
Inline styles | Single property | Removing specific inline CSS properties |
setProperty() |
Inline styles | Single property | Setting property to "none" or "initial" |
| Null assignment | Inline styles | Single property | Quick removal of specific properties |
removeAttribute() |
Inline styles | All properties | Removing entire style attribute |
classList.remove() |
CSS classes | All class properties | Removing stylesheet-defined styles |
Conclusion
JavaScript provides multiple methods to remove CSS properties. Use removeProperty() for individual inline styles, removeAttribute() for all inline styles, and classList.remove() for class-based styles. Choose the method that best fits your specific use case.
22K+ Views
