如何使用 JavaScript 刪除 CSS 屬性？
- 王林轉載
- 2023-09-10 18:09:031452瀏覽
有時，我們需要在執行某些任務後從 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中文網其他相關文章！