有时，我们需要在执行某些任务后从 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元素中删除背景颜色。
@H_404_29@<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元素来设置边框的空字符串。
在输出中，我们最初可以观察到绿色边框，当我们单击按钮时，它会删除边框。
@H_404_29@<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 元素文本的初始字体大小。
@H_404_29@<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() 方法从“
@H_404_29@<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>结论
我们学习了四种从 HTML 元素中删除 CSS 属性的不同方法。在第一种方法中，我们使用了removeproperty()方法，这是删除CSS属性的最佳方法之一。第二种和第三种方法几乎相似，都为 CSS 属性设置 null 值，但它不会从 HTML 元素中删除 CSS 属性。
在最后一种方法中，我们使用了removeAttribute()方法来删除“style”属性，但只有当我们需要从HTML元素中删除所有样式时才应该使用它。
以上就是如何使用 JavaScript 删除 CSS 属性？的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
