如何使用 JavaScript 删除 CSS 属性？
- 王林转载
- 2023-09-10 18:09:031415浏览
有时，我们需要在执行某些任务后从 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("style");
}
</script>
结论
我们学习了四种从 HTML 元素中删除 CSS 属性的不同方法。在第一种方法中，我们使用了removeProperty()方法，这是删除CSS属性的最佳方法之一。第二种和第三种方法几乎相似，都为 CSS 属性设置 null 值，但它不会从 HTML 元素中删除 CSS 属性。
在最后一种方法中，我们使用了removeAttribute()方法来删除“style”属性，但只有当我们需要从HTML元素中删除所有样式时才应该使用它。
以上所有方法仅适用于删除内联 CSS 属性。
以上是如何使用 JavaScript 删除 CSS 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！