To remove CSS style property from an element in JavaScript, use the style.removeProperty() method and pass the name of the CSS property to be removed as a string argument. This method will remove the inline style declaration for the specific CSS property from the element.
How To Remove CSS Style Property From An Element In JavaScript
In order to remove CSS style property from an element in JavaScript, you can use the JavaScript style.removeProperty() method. This method takes a string argument containing the name of the CSS style property to be removed from the element. For example, if you wanted to remove the “color” property from an element, you would pass “color” as the string argument to style.removeProperty().
Here is the complete HTML and JavaScript code for a simple web page that demonstrates how to use the style.removeProperty() method to remove a CSS style property from an element:
<!DOCTYPE html>
<html>
<head>
<title>Remove CSS Style Property</title>
</head>
<body>
<div id="my-element" style="color:red">This element has a red color style</div>
<script>
var myElement = document.getElementById("my-element");
myElement.style.removeProperty("color");
</script>
</body>
</html>As you can see from the code above, when the page loads, the element with the id of “my-element” has a CSS style property of “color” set to “red”. However, when the JavaScript code runs, the style.removeProperty() method is used to remove the “color” property from the element, and as a result, the element’s color changes to the default black.
You can also use the style.removeProperty() method to remove multiple CSS style properties from an element by passing each property name as a separate string argument. For example, the following code would remove both the “color” and the “background-color” properties from an element:
<html>
<head>
<title>Remove CSS Style Property</title>
</head>
<body>
<div id="my-element" style="color:red; background-color:yellow">This element has a red color style</div>
<script>
var myElement = document.getElementById("my-element");
myElement.style.removeProperty("color");
myElement.style.removeProperty("background-color");
</script>
</body>
</html>You can also remove a style property from an element by setting the style.property = null. For example, the following code would remove the “color” property from an element:
<html>
<head>
<title>Remove CSS Style Property</title>
</head>
<body>
<div id="my-element" style="color:red">This element has a red color style</div>
<script>
var myElement = document.getElementById("my-element");
myElement.style.color = null;
</script>
</body>
</html>You can remove multiple style properties from an element by setting the style.property1 = null, style.property2 = null, etc. For example, the following code would remove both the “color” and the “background-color” properties from an element:
<html>
<head>
<title>Remove CSS Style Property</title>
</head>
<body>
<div id="my-element" style="color:red; background-color:yellow">This element has a red color style</div>
<script>
var myElement = document.getElementById("my-element");
myElement.style.color = null;
myElement.style.backgroundColor = null;
</script>
</body>
</html>Note how we used the camel case version of “background-color” (i.e. backgroundColor) when setting it to null. This is because the style object properties are camel cased, not hyphenated like the CSS properties are.
The style.removeProperty() method is part of the CSSStyleDeclaration interface, which is used to represent the styles of an element. The CSSStyleDeclaration interface also provides other methods for manipulating CSS styles, such as the style.setProperty() method for setting a new value for a CSS property, and the style.getPropertyValue() method for getting the value of a CSS property.
Here is an example of how you could use the style.getPropertyValue() method to get the value of a CSS property before removing it with the style.removeProperty() method:
<!DOCTYPE html>
<html>
<head>
<title>Remove CSS Style Property</title>
</head>
<body>
<div id="my-element" style="color:red">This element has a red color style</div>
<script>
var myElement = document.getElementById("my-element");
// Get the value of the "color" property
var colorValue = myElement.style.getPropertyValue("color");
console.log(color); //red
// Remove the "color" property
myElement.style.removeProperty("color");
</script>
</body>
</html>As you can see from the code above, the style.getPropertyValue() method is used to get the value of the “color” property before it is removed by the style.removeProperty() method.
Here is an example to set a property value using style.setProperty() and get the same using style.getPropertyValue():
<!DOCTYPE html>
<html>
<head>
<title>Remove CSS Style Property</title>
</head>
<body>
<div id="my-element">This element has no color style</div>
<script>
var myElement = document.getElementById("my-element");
myElement.style.setProperty("color", "red", "important");
console.log(myElement.style.getPropertyValue("color")); //red
</script>
</body>
</html>As you can see from the code above, the style.setProperty() method is used to set a value for the “color” property, and then the style.getPropertyValue() method is used to get the value of that property. The output of the code above would be “red” in the browser console.
Conclusion
In conclusion, to remove CSS style property from an element in JavaScript, you can use the style.property = null or style.removeProperty() method. You can also use the style.getPropertyValue() method to get the value of a CSS property before removing it and style.setProperty() to set a value for a CSS property.
I hope this article was helpful. If you have any questions or comments, please feel free to leave them below. Thanks for reading!