How To Remove CSS Style Property From An Element Using JavaScript

Posted on by Tom Joseph
Remove CSS Style Property from an Element using JavaScript

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *