如何使用 JavaScript 删除 CSS 属性？-js教程-PHP中文网

如何使用 JavaScript 删除 CSS 属性？

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

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

使用removeProperty()方法

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

语法

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

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

登录后复制

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

示例

在下面的示例中，我们创建了包含不同 CSS 属性（例如“宽度”、“高度”、“边框”和“背景颜色”）的 div 元素。

每当用户单击按钮时，我们都会执行removeColor()函数。在removeColor()函数中，我们使用类名访问div元素。之后，我们通过传递“background-color”作为参数，使用removeProeprty()方法从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()函数中，我们使用类名和setProperty()方法访问div元素来设置边框的空字符串。

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

<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”作为 remvoeAttribute() 方法的参数传递，以删除所有 CSS 属性。

示例

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

”元素。

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

”元素中删除“style”属性。



     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(&quot;style&quot;);
        }
    </script>

登录后复制