Sometimes, we need to remove CSS properties from HTML elements after performing certain tasks. For example, the user has not paid the subscription fee for your app. Therefore, you will have the "Payment Due" message in "red" in the header section. After the user clears the payment, you can change the content of the header and remove the "color: red" attribute to set the initial color.
There are many use cases that require removing CSS properties from HTML elements. Here we will learn different ways to remove CSS properties.
The first method uses the removeProperty() method. It is used to remove any CSS attribute from an HTML element and takes the attribute name as parameter.
Users can use the removeProperty() method to remove CSS properties from HTML elements according to the following syntax.
ele.style.removeProperty("property-name");
In the above syntax, "ele" is an HTML element from which we need to remove the CSS attributes.
In the example below, we have created a div element that contains different CSS properties such as "width", "height", "border" and "background color".
Every time the user clicks the button, we will execute the removeColor() function. In the removeColor() function, we access the div element using the class name. After that, we use the removeProeprty() method to remove the background color from the div element by passing "background-color" as parameter.
In the output, the user 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>
The second way to remove CSS properties from HTML elements is to use the setProperty() method. The setProperty() method is used to set CSS properties of an HTML element, but when we set an empty string for any CSS property, we can remove the CSS property from the element.
Users can use the setProperty() method to remove CSS properties from HTML elements according to the following syntax.
ele.style.setProperty(css property, "");
In the above syntax, we pass the property name as the first parameter and the empty string as the second parameter.
In the example below, we create a 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 border's empty string.
In the output we can initially observe the green border and when we click on 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>
Another way to remove CSS properties from HTML elements is to set a null value for a specific CSS property. We can also set null value for any specific CSS property using JavaScript’s setProperty() method and JQuery’s CSS() method. Here we will directly access the CSS property and set a null value for it.
Users can remove CSS properties from HTML elements by setting a null value for the CSS property by following the following syntax.
element.style.css_property = null;
In the above syntax, users need to replace "element" and "css_property" with specific HTML element and CSS property names respectively.
In the example below, the div element contains some text and we set the font size to 3rem. In the removeSize() function, we access the "style" object of the div element and set the "fontSize" property of the style object to null.
In the output, the user can click a button to set the initial font size of the div element text.
<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>
The fourth way to remove CSS attributes from HTML elements is to use the removeAttribute() method. JavaScript's removeAttribute() method is used to remove a specific HTML attribute from JavaScript. In our case, we can remove the "style" attribute, which will remove all styles from the HTML element.
Users can use the removeAttribute() method to remove CSS attributes from HTML elements according to the following syntax.
ele.removeAttribute("style");
In the above syntax, we pass "style" as parameter of remvoeAttribute() method to remove all CSS attributes.
In the example below, we create a "
" element that contains text and multiple CSS properties.
removeStyle() function removes the "style" attribute from the "
" element using the removeAttribute() method.
Using the removeAttribute() method to remove the CSS property from HTML element
Welcome to the tutorials point, CSS tutorial.
<script>
function removeStyle() {
var ele = document.getElementsByClassName("para")[0];
ele.removeAttribute("style");
}
</script>
We learned four different ways to remove CSS properties from HTML elements. In the first method, we have used the removeProperty() method, which is one of the best ways to remove CSS properties. The second and third method are almost similar in setting null value for CSS properties, but it does not remove CSS properties from HTML elements.
In the last method, we used the removeAttribute() method to remove the "style" attribute, but it should be used only when we need to remove all styles from the HTML element.
All the above methods only work for removing inline CSS properties.
The above is the detailed content of How to remove CSS properties using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
