資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 移除 CSS 屬性？
使用 JavaScript 移除 CSS 屬性在各種方面都很有幫助，例如移除不必要的 樣式 屬性，提高效能，易於維護，並且除錯變得更容易。
在這篇文章中，我們有一個 div 元素，在某些方法中，還有 p 元素，這些元素上應用了一些 CSS 屬性。我們的任務是使用 JavaScript 移除應用的 CSS 屬性。
使用 JavaScript 移除 CSS 屬性的方法
使用 JavaScript 移除 CSS 屬性有多種方法，這裡列出了幾種方法，並提供了分步說明和完整的示例程式碼。
使用 removeProperty() 方法
要使用 JavaScript 移除 CSS 屬性，我們使用了 removeProperty() 方法。removeProperty() 方法用於移除引數中指定的 CSS 屬性。此方法僅移除內聯樣式。
- 我們使用了 "removeProperty("background-color")" 方法，該方法移除類名為 ele 的 div 元素的 背景顏色。
示例
在此示例中，我們實現了上述方法，以從 div 元素中移除背景顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ele {
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used removeProperty()
method to remove css property.
</p>
<div class="ele" style="background-color: red;">
</div>
<br>
<button onclick="removeColor()">
Remove background color
</button>
<script>
function removeColor() {
document.querySelector(".ele")
.style.removeProperty("background-color");
}
</script>
</html>
使用 setProperty() 方法
在此方法中，我們使用了 setProperty() 方法。透過 setProperty() 方法，我們可以為引數中提到的 CSS 屬性設定新值。
- 我們使用了 "setProperty("border", "none");" 方法，透過將 border 屬性的新值設定為 none 來移除 邊框。
示例
在此示例中，我們實現了上述步驟，以移除邊框屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ele {
width: 200px;
height: 200px;
background-color: blue;
border: 10px solid green;
color: white;
}
</style>
</head>
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used setProperty()
method to remove css property.
</p>
<div class="ele">
</div>
<br>
<button onclick="removeBorder()">Remove</button>
<script>
function removeBorder() {
document.querySelector(".ele")
.style.setProperty("border", "none");
}
</script>
</body>
</html>
透過設定 'null' 值來移除 CSS 屬性
要使用 JavaScript 移除 CSS 屬性，我們可以為特定的 CSS 屬性設定 null 值。透過為任何屬性指定 null 值，它會自動移除該屬性。
- 在此方法中，我們為 div 設定了 "style.fontSize = null;"，這會移除 div 元素的 字型大小 屬性。
示例
這是一個實現上述方法的示例，其中 div 元素包含一些文字，我們訪問 div 元素的 style 物件並將 null 設定為 fontSize 屬性。
<!DOCTYPE html>
<html lang="en">
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have set null value to
css property to remove css property.
</p>
<div style="font-size: 3rem;">
Font size will be reduced.
</div>
<br>
<button onclick="removeSize()">
Remove font-size
</button>
<script>
function removeSize() {
document.querySelector('div')
.style.fontSize = null;
}
</script>
</html>
使用 removeAttribute() 方法
在此方法中，我們使用了 removeAttribute() 方法來移除引數中指定的 CSS 屬性。它會移除直接使用 styles 屬性為任何元素實現的任何內聯 CSS 屬性。
- 在此方法中，我們使用了 "removeAttribute("style");"，並獲取了 p 元素的 para 類。
示例
這是一個實現上述方法的示例，用於使用 JavaScript 移除 CSS 屬性。
<!DOCTYPE html>
<html lang="en">
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used removeAttribute()
method to remove css property.
</p>
<p style="color: green;" class="para">
Click Remove to remove CSS property.
</p>
<br>
<button onclick="removeStyle()">Remove</button>
<script>
function removeStyle() {
document.getElementsByClassName("para")[0]
.removeAttribute("style");
}
</script>
</html>
透過移除類名
在此方法中，我們移除了應用了 CSS 屬性的類。
- 我們使用了 "remove('sample');" 來移除包含 CSS 屬性的類 sample。
示例
這是一個實現上述步驟的示例，我們首先使用 id 獲取 div 元素，然後使用類名移除其類。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Removing Class</title>
<style>
.sample {
border: 10px green solid;
}
</style>
</head>
<body>
<h3>Remove CSS property using JavaScript</h3>
<p>
In this example we have used remove()
method to remove css property.
</p>
<button onclick="fun()">Remove</button>
<div class="sample" id="example">
We are removing the class.
</div>
<script>
function fun() {
document.getElementById("example")
.classList.remove('sample');
}
</script>
</body>
</html>
結論
在這篇文章中，我們瞭解瞭如何使用 JavaScript 移除 CSS 屬性。我們討論了五種不同的使用 JavaScript 移除 CSS 屬性的方法，分別是：使用 removeProperty() 方法，使用 setProperty() 方法，使用 null 值，使用 removeAttribute() 方法以及透過 移除類名。對於內聯樣式，removeProperty() 和 removeAttribute() 最常用，而當不使用內聯樣式時，可以使用 remove() 方法。
19K+ 瀏覽量
