有時，我們需要在執行某些任務后從 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”屬性。
<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 屬性。
以上就是如何使用 JavaScript 刪除 CSS 屬性？的詳細內容，更多請關注www.92cms.cn其它相關文章！
