資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學在 JavaScript 中清除元素的 classList？
我們在本文中將要執行的任務是在 JavaScript 中清除元素的 *classList*。在進入正題之前，讓我們快速瞭解一些內容。
文件中所有元素物件（即表示元素的物件）都派生自最通用的基類，稱為 Element。它只包含適用於所有型別元素的函式和特性。
JavaScript 中的 ClassList
JavaScript classList 是一個 DOM 屬性，它允許自定義元素的 CSS（層疊樣式表）類。只讀 JavaScript *classList 屬性*檢索 CSS 類的名稱。
語法
以下是 classlist 的語法
element.classList
JavaScript remove() 方法
JavaScript remove() 方法用於從 DOM（文件物件模型）中刪除元素。它可以用於任何 HTML 元素，例如 <div>、<span>，甚至是整個頁面。
此方法的工作原理是獲取選定的元素及其子元素，然後將其從文件中刪除。此過程完成後，刪除的元素將不再存在於 DOM 中。
語法
以下是 remove() 的語法
element.remove()
示例
在下面的示例中，我們執行指令碼以在 JavaScript 中清除元素 classList。
<!DOCTYPE html>
<html>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: #CCCCFF;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
<body>
<p>click to remove the element in classlist</p>
<button onclick="tutorial()">Try it</button>
<div id="myid" class="mystyle">
Welcome Everyone.
</div>
<script>
function tutorial() {
var element = document.getElementById("myid");
element.classList.remove("mystyle");
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含應用了 CSS 的文字以及網頁上的提示和點選按鈕。如果使用者點選按鈕，則會觸發事件，並刪除應用於元素的 CSS。
示例
考慮以下示例，我們使用 style 屬性來刪除特定類。
<!DOCTYPE html>
<html>
<body>
<style>
.bg {
background-color: #9FE2BF;
}
.text {
color: white;
}
</style>
<div id="box" class="text bg">AVATAR</div>
<button onclick="tutorial()">Click it</button>
<script>
function tutorial() {
const box = document.getElementById('box');
box.removeAttribute('class');
}
</script>
</body>
</html>
執行上述指令碼後，將彈出輸出視窗，顯示應用了 CSS 的文字以及一個點選按鈕。如果使用者點選按鈕，則會觸發事件，並刪除應用於元素的 CSS。
示例
讓我們執行以下程式碼來觀察它會做什麼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>
.removeClass {
color: red;
}
</style>
<body>
<p id="remove" class="removeClass">Javascript Tutorial</p>
<button onclick="removeClassName()">Remove</button>
<script>
function removeClassName() {
const element = document.getElementById("remove");
element.classList.remove("removeClass");
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含應用了內聯 CSS 的文字以及一個點選按鈕。如果使用者點選按鈕，則會觸發事件，並刪除應用於文字的 CSS。
更新於：2023年1月18日
716 次瀏覽
廣告