JavaScript 如何删除CSS属性

有时候，在执行一些任务后，我们需要从HTML元素中移除CSS属性。例如，用户尚未支付您应用程序的订阅费用。因此，您在页眉部分以“红色”显示“付款到期”消息。一旦用户清除付款，您可以更改页眉的内容并删除“color: red”属性以设置初始颜色。

有很多情况下，我们需要从HTML元素中移除CSS属性。在这里，我们将学习不同的方法来删除CSS属性。

使用removeProperty()方法

第一种方法使用removeProperty()方法。它用于从HTML元素中删除任何CSS属性，并且它以属性名称作为参数。

语法

用户可以按照下面的语法使用removeProperty()方法从HTML元素中移除CSS属性。

ele.style.removeProperty("property-name");

在上面的语法中，’ele’是一个我们需要从中删除CSS属性的HTML元素。

示例

在下面的示例中，我们创建了包含不同CSS属性（如’width’，’height’，’border’和’background-color’）的div元素。

每当用户点击按钮时，我们会执行removeColor()函数。在removeColor()函数中，我们使用类名访问div元素。然后，我们使用removeProperty()方法，通过将’background-color’作为参数传递给它来删除div元素的背景颜色。

在输出中，用户可以点击按钮并观察到背景颜色将被删除。

<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>

使用setProperty()方法

第二种去除HTML元素中CSS属性的方法是使用setProperty()方法。setProperty()方法用于为HTML元素设置CSS属性，但当我们将空字符串设置为任何CSS属性时，我们可以从元素中删除该CSS属性。

语法

用户可以按照以下语法使用setProperty()方法从HTML元素中删除CSS属性。

ele.style.setProperty(css property, "");

在上述语法中，我们将属性名作为第一个参数传递，将空字符串作为第二个参数传递。

示例

在下面的示例中，我们创建了一个div元素，与第一个示例中包含一些CSS属性的元素相同。在removeBorder()函数中，我们使用类名访问div元素，并使用setProperty()方法设置边框为空字符串。

在输出中，我们可以观察到最初的绿色边框，当我们点击按钮时，它会删除边框。

<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>

通过设置“null”值来删除CSS属性

另一种从HTML元素中删除CSS属性的方法是通过为特定的CSS属性设置null值。我们还可以使用JavaScript的setProperty()方法和JQuery的CSS()方法为任何特定的CSS属性设置null值。在这里，我们将直接访问CSS属性并设置null值。

语法

用户可以按照以下语法通过为CSS属性设置null值来从HTML元素中删除CSS属性。

element.style.css_property = null;

在上述语法中，用户需要分别将”element”和”css_property”替换为特定的HTML元素和CSS属性名称。

示例

在下面的示例中，div元素包含一些文本，并将字体大小设置为3rem。在removeSize()函数中，我们访问div元素的’style’对象，并将’style’对象的’fontSize’属性设置为null。

在输出中，用户可以点击按钮来为div元素的文本设置初始字体大小。

<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>

使用removeAttribute()方法

从HTML元素中移除CSS属性的第四种方法是使用removeAttribute()方法。JavaScript的removeAttribute()方法用于从JavaScript中移除特定的HTML属性。在我们的示例中，我们可以移除’style’属性，这将移除HTML元素上的所有样式。

语法

用户可以按照以下语法使用removeAttribute()方法从HTML元素中移除CSS属性。

ele.removeAttribute("style");

在上述语法中，我们将‘style’作为removeAttribute()方法的参数传递，以删除所有的CSS属性。

示例

在下面的示例中，我们创建了包含文本和多个CSS属性的‘

’元素。

removeStyle()函数使用removeAttribute()方法从‘

’元素中删除‘style’属性。

<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>