所属分类：web前端开发
有时，我们需要在执行某些任务后从 HTML 元素中删除 CSS 属性。例如，用户尚未支付您的应用程序的订阅费。因此，您将在标题部分以“红色”显示“到期付款”消息。用户清除付款后，您可以更改标头的内容并删除“color: red”属性以设置初始颜色。
有很多用例需要从 HTML 元素中删除 CSS 属性。在这里，我们将学习删除 CSS 属性的不同方法。
第一种方法使用removeProperty() 方法。它用于从 HTML 元素中删除任何 CSS 属性，并将属性名称作为参数。
用户可以按照以下语法使用removeProperty()方法从HTML元素中删除CSS属性。
微博登录
QQ登录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>
从 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>
从 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>
从 HTML 元素中删除 CSS 属性的第四种方法是使用removeAttribute() 方法。 JavaScript 的removeAttribute() 方法用于从JavaScript 中删除特定的HTML 属性。在我们的例子中，我们可以删除“style”属性，这将从 HTML 元素中删除所有样式。
用户可以按照以下语法使用removeAttribute()方法从HTML元素中删除CSS属性。
ele.removeAttribute("style");
在上面的语法中，我们将“style”作为 remvoeAttribute() 方法的参数传递，以删除所有 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>
我们学习了四种从 HTML 元素中删除 CSS 属性的不同方法。在第一种方法中，我们使用了removeProperty()方法，这是删除CSS属性的最佳方法之一。第二种和第三种方法几乎相似，都为 CSS 属性设置 null 值，但它不会从 HTML 元素中删除 CSS 属性。
在最后一种方法中，我们使用了removeAttribute()方法来删除“style”属性，但只有当我们需要从HTML元素中删除所有样式时才应该使用它。
以上所有方法仅适用于删除内联 CSS 属性。
