removeProperty() function is really an efficient method to remove CSS style property from an element using JavaScript. Let’s see the article below to know the specific steps to do it.
Remove CSS style property from an element using JavaScript
Use removeProperty() method
As the name implies, removeProperty()
is a method used to remove CSS style property from an element using JavaScript. This is a frequently used method in your js file.
Syntax:
removeProperty(param)
Parameter:
- param: This is the parameter to be removed and formatted with a string.
To better understand how to pass parameters to use this method, refer to the following example.
Example:
In index.html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta content="LearnShareIT" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LearnShareIT</title> </head> <body> <div id="learn" style="color: red">Learn with me!!</div> <script src="main.js"></script> </body> </html>
In the main.js file, I check the div tag’s color attribute with the learning id.
// Get element with id is learn divNode = document.getElementById("learn"); // Check the color of this node console.log("The color of divNode is: " + divNode.style.color);
Output
The color of divNode is: red
Following in the main.js
file, I removed the CSS color attribute of the div tag I just took as follows:
// Get element with id is learn divNode = document.getElementById("learn"); // Remove the color of divNode divNode.style.removeProperty("color"); // Check the color of this node console.log("The color of divNode is: " + divNode.style.color);
Output
The color of divNode is:
The argument is a CSS property of the element just obtained and enclosed in ' '
, representing it as a string.
Since its red attribute has been removed, the default result will be an empty string, but the CSS display will still be black
(the default).
To display the correct sequence of its default color values, we can customize it in the main.js
file.
// Get element with id is learn divNode = document.getElementById("learn"); // Remove the color of divNode divNode.style.removeProperty("color"); // Check the color of this node console.log( "The color of divNode is: " + (divNode.style.color = " " ? (divNode.style.color = "black") : (divNode.style.color = divNode.style.color)) );
Output
The color of divNode is: black
Here I used the ternary operator to check the color attribute of the divNode
tag. If it’s an empty string, the color property has been removed, so I’ll set it to black. Otherwise, I will keep it.
Use setProperty() method
Using removeProperty()
to manipulate data in CSS is quite risky. It may lose properties or produce unexpected results. So, setProperty()
is an appropriate method to remove and reassign the property to that Element.
Syntax:
setProperty(param, value)
Parameters:
- param: This parameter will be overwritten on the old one and formatted with a string.
- value: The value set for the param.
The same example above, this time, I will not use the removeProperty()
method but the setProperty()
method instead.
Example:
// Get element with id is learn divNode = document.getElementById("learn"); // Set the color of divNode divNode.style.setProperty("color", "yellow"); // Check the color of this node console.log("The color of divNode is: " + divNode.style.color);
Output
The color of divNode is: yellow
As you have seen, when I assign the value to the color property, the value assigned to the property is still passed as a string. It must also match and be in the list of properties that CSS gives.
Summary
Either removeProperty()
method or setProperty()
method can be used to remove CSS style property from an element using JavaScript. If you want to default your property, use removeProperty()
. If you want to change the property value, use setProperty()
. Study well.
Maybe you are interested:
- Solution To Create An Element With ID Attribute Using JS
- Update all dom elements with a specific class using js
- Remove the “disabled” Attribute using JavaScript
- Clear the Content of a Div element using JavaScript
- Check if Element’s Style contains CSS property using JavaScript

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css