Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to remove CSS property using JavaScript?
To remove CSS property using JavaScript, it can be helpful in various aspects like removing unnecessary style property, increase the performance, can be easily maintained and and debugging becomes easier.
In this article we are having a div element and in some approaches p element on which some CSS properties have veen applied. Our task is to remove applied CSS property using JavaScript.
Approaches to Remove CSS property using JavaScript
There are various ways to remove CSS property using JavaScript, here is a list of approaches with step wise explaination and complete example codes.
- Using the removeProperty() Method
- Using the setProperty() Method
- Using null Value
- Using the removeAttribute() Method
- By Removing Class
Using the removeProperty() method
To remove CSS property using JavaScript, we have used removeProperty() method. The removeProperty() method is used to remove the specified CSS property in the parameter. This method removes only inline styles.
- We have used "removeProperty("background-color")" method, which removes the background-color of the div element with class name ele.
Example
In this example, we have implemented the above mentioned method to remove background color from div element.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ele {
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used removeProperty()
method to remove css property.
</p>
<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>
</html>
Using the setProperty() method
In this approach, we have used setProperty() method. By setProperty() method we can set a new value for the CSS property mentioned in the parameter.
- We have used "setProperty("border", "none");" method to remove the border by setting the new value of border property to none.
Example
In this example, we have implemented the above mentioned step to remove the border property.
<!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 JavaScript</h3>
<p>
In this example we have used setProperty()
method to remove css property.
</p>
<div class="ele">
</div>
<br>
<button onclick="removeBorder()">Remove</button>
<script>
function removeBorder() {
document.querySelector(".ele")
.style.setProperty("border", "none");
}
</script>
</body>
</html>
Remove CSS property by setting up a ‘null’ value
To remove CSS property using JavaScript we can set up a null value for the particular CSS property. By specifying a null value to any property, it automatically removes that property.
- In this approach, we have set "style.fontSize = null;" for div which removes the fontsize property of div element.
Example
Here is an example implementing the above approach where div element contains some text, we access the style object of the div element and set null to the fontSize property.
<!DOCTYPE html>
<html lang="en">
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have set null value to
css property to remove css property.
</p>
<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>
</html>
Using the removeAttribute() Method
In this approach, we have used removeAttribute() Method to remove the specified CSS property mentioned in parameter. It removes any inline CSS property directly implemented using styles attribute to any element.
- In this approach we have used "removeAttribute("style");" by getting para class of p element.
Example
Here is an example implementing above mentioned approach to remove CSS property using JavaScript.
<!DOCTYPE html>
<html lang="en">
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used removeAttribute()
method to remove css property.
</p>
<p style="color: green;" class="para">
Click Remove to remove CSS property.
</p>
<br>
<button onclick="removeStyle()">Remove</button>
<script>
function removeStyle() {
document.getElementsByClassName("para")[0]
.removeAttribute("style");
}
</script>
</html>
By Removing Class
In this approach we have removed the class on which the CSS properties was applied.
- We have used "remove('sample');" to remove the class sample containing the CSS properties.
Example
Here is an implementation of above mentioned step where we first get the div element using id, then using class name to remove it's class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Removing Class</title>
<style>
.sample {
border: 10px green solid;
}
</style>
</head>
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used remove()
method to remove css property.
</p>
<button onclick="fun()">Remove</button>
<div class="sample" id="example">
We are removing the class.
</div>
<script>
function fun() {
document.getElementById("example")
.classList.remove('sample');
}
</script>
</body>
</html>
Conclusion
In this article we have understood how to remove CSS property using JavaScript. We discussed five different approaches to remove CSS property using JavaScript which are: by removeProperty() method, by setProperty() method, using null value, by removeAttribute() method and by removing class. For inline styles, removeProperty() and removeAttribute() are most commonly used and when not using inline styles, remove() method can be used.
14K+ Views
