<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>
<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 元素中刪除所有樣式。
