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?
Sometimes, we require to remove CSS properties from HTML elements after performing some tasks. For example, users haven’t paid the subscription fees for your application. So, you are showing the ‘payment due’ message in the header section with a ‘red’ color. Once the user clears the payment, you can change the content of the header and remove the ‘color: red’ property to set the initial color.
There are lots of use cases in which we require to remove CSS property from the HTML element. Here, we will learn different approaches to removing CSS properties.
Using the removeProperty() method
The first approach uses the removeProperty() method. It is used to remove any CSS property from the HTML element, and it takes the property name as a parameter.
Syntax
Users can follow the syntax below to use the removeProperty() method to remove the CSS property from the HTML element.
ele.style.removeProperty("property-name");
In the above syntax, ‘ele’ is an HTML element from which we require to remove the CSS property.
Example
In the example below, we created the div element containing the different CSS properties such as ‘width’, ‘height’, ‘border’, and ‘background-color’.
Whenever users click the button, we execute the removeColor() function. In the removeColor() function, we access the div element using the class name. After that, we use the removeProeprty() method by passing the ‘background-color’ as a parameter to remove the background color from the div element.
In the output, users can click the button and observe that the background color will be removed.
<html>
<body>
<h3> Using the <i> removeProperty() method </i> to remove the CSS property from HTML element </h3>
<div class = "ele" style = "width: 200px; height: 200px; background-color: red; border: 2px solid black;">
</div> <br>
<button onclick = "removeColor()">
Remove background color </button>
<script>
function removeColor() {
var ele = document.querySelector(".ele");
ele.style.removeProperty("background-color");
}
</script>
</html>
Using the setProperty() method
The second approach to remove CSS property from the HTML element uses the setProperty() method. The setProperty() method is used to set the CSS property for the HTML element, but when we set the empty string for any CSS property, we can remove the CSS property from the element.
Syntax
Users can follow the syntax below to use the setProperty() method to remove CSS property from the HTML element.
ele.style.setProperty(css property, "");
In the above syntax, we passed the property name as the first parameter and the empty string as a second parameter.
Example
In the example below, we created the div element, as in the first example containing some CSS properties. In the removeBorder() function, we access the div element using the class name and the setProperty() method to set the empty string for the border.
In the output, we can observe the green border initially, and when we click the button, it removes the border.
<html>
<body>
<h3> Using the <i> setProperty() method </i> to remove the CSS property from HTML element </h3>
<div class = "ele" style = "width: 200px; height: 200px;background-color: blue; border: 10px solid green;">
</div> <br>
<button onclick = "removeBorder()">
Remove border </button>
<script>
function removeBorder() {
var ele = document.querySelector(".ele");
ele.style.setProperty("border", "");
}
</script>
</html>
Remove CSS property by setting up a ‘null’ value
Another way to remove CSS property from the HTML element is by setting up a null value for the particular CSS property. We can also use the setProperty() method of JavaScript and the CSS() method of JQuery to set a null value for any particular CSS property. Here we will directly access the CSS property and set a null value for that.
Syntax
Users can follow the syntax below to remove the CSS property from the HTML element by setting up a null value for the CSS property.
element.style.css_property = null;
In the above syntax, users need to replace the ‘element’ and ‘css_property’ with a particular HTML element and CSS property name, respectively.
Example
In the example below, the div element contains some text, and we set the font size equal to 3rem. In the removeSize() function, we access the ‘style’ object of the div element and set null to the ‘fontSize’ property of the style object.
In the output, users can click the button to set the initial font size for the text of the div element.
<html>
<body>
<h3> Setting the <i> null values to CSS proeprties </i> to remove the CSS property from HTML element </h3>
<div style = "font-size: 3rem;">
Hello World! How are you?
</div>
</div> <br>
<button onclick = "removeSize()"> Remove font-size </button>
<script>
function removeSize() {
let div = document.querySelector('div');
div.style.fontSize = null;
}
</script>
</html>
Using the removeAttribute() method
The fourth approach to remove CSS properties from the HTML element is using the removeAttribute() method. The removeAttribute() method of JavaScript is used to remove a particular HTML attribute from JavaScript. In our case, we can remove the ‘style’ attribute, which will remove all styles from the HTML element.
Syntax
Users can follow the syntax below to use the removeAttribute() method to remove the CSS properties from the HTML element.
ele.removeAttribute("style");
In the above syntax, we passed the ‘style’ as a parameter of the remvoeAttribute() method to remove all CSS properties.
Example
In the example below, we created the ‘<p>’ element containing the text and multiple CSS properties.
The removeStyle() function removes the ‘style’ attribute from the ‘<p>’ element using the removeAttribute() method.
<html>
<body>
<h3> Using the <i> removeAttribute() method </i> to remove the CSS property from HTML element </h3>
<p style = "color: green; font-size: 1.5rem;" class = "para">
Welcome to the tutorials point, <span class = "ele" style = "border: 2px solid red;"> CSS </span> tutorial.
</p> <br>
<button onclick = "removeStyle()"> Remove color </button>
<script>
function removeStyle() {
var ele = document.getElementsByClassName("para")[0];
ele.removeAttribute("style");
}
</script>
</html>
Conclusion
We learned four different approaches to removing CSS properties from the HTML element. In the first approach, we used the removeProperty() method, which is one of the best ways to remove CSS property. The second and third approach is almost similar as both set the null value for the CSS property, but it does not remove the CSS property from the HTML element.
In the last approach, we used the removeAttribute() method to remove the ‘style’ attribute, but it should be used only when we require to remove all styles from the HTML element.
All the above approaches only work to remove inline CSS properties.
11K+ Views
