資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用Javascript為給定元素新增類？
在 JavaScript 中，有多種方法可以為元素新增類。我們可以使用.className屬性或.add()方法為特定元素新增類名。
類屬性可以在 CSS 中用於對具有相同類名的元素執行某些操作。
使用 className 屬性
我們可以使用此屬性為HTML元素新增類，而不會重置其現有類。此屬性可以用來獲取元素的class屬性的值。
如果元素已宣告一個類，並且我們必須為此元素新增一個新的類名，則應在編寫類名前插入一個空格。(例如 document.getElementById("").className = " newClass");
語法
您可以像下面這樣設定此屬性的值：
element.className += "newClass";
其中 newClass 指定元素的類名。要應用多個類，需要用空格分隔。
以下語句返回 className 屬性的值。
element.className;
此屬性儲存一個字串值，表示類名或用空格分隔的類名列表。
示例 1
在下面的示例中，我們使用.className屬性新增類名。
<!DOCTYPE html>
<html lang="en">
<head>
<title>class</title>
</head>
<style>
.CSS{
color: blueviolet;
font-style: italic;
background-color: rgb(227, 171, 171);
}
</style>
<body>
<button onclick="addClass()">AddClass</button>
<h3 id="heading" >Tutorialspoint easy to learn</h3>
<script>
function addClass(){
var add_class = document.getElementById("heading");
add_class.className += "CSS";
}
</script>
</body>
</html>
點選按鈕（AddClass）後，標題看起來像下面的圖片。
示例 2
在下面的示例中，我們也可以使用以下程式碼執行相同的操作，它將給出相同的輸出。
<!DOCTYPE html>
<html lang="en">
<head>
<title>class</title>
</head>
<style>
.CSS{
color: blueviolet;
font-style: italic;
background-color: rgb(227, 171, 171);
}
</style>
<body>
<button onclick="addClass()">AddClass</button>
<h3 id="heading" >Tutorialspoint easy to learn</h3>
<script>
function addClass(){
var add_class = document.getElementById("heading").className = "CSS";
}
</script>
</body>
</html>
使用 add() 方法
此方法用於為首選或選定的元素新增類名。以下是此方法的語法：
Element.classList.add("newClass");
示例 1
在下面的示例中，我們使用add()方法為具有id = p1的段落元素新增類名。
<!DOCTYPE html>
<html>
<head>
<title>add class name using JavaScript</title>
<style>
.newClass {
font-size: 30px;
background-color: rgb(149, 237, 136);
color: rgb(19, 21, 19);
border: 2px solid rgb(58, 35, 35);
}
</style>
</head>
<body>
<h1>Hello Tutorialspoint :)</h1>
<p id="p1">Welcome to the tutorialspoint.com</p>
<p>Click the following button to see the effect.</p>
<button onclick="addClass()">Add Class</button>
<script>
function addClass() {
var add_class = document.getElementById("p1");
add_class.classList.add("newClass");
}
</script>
</body>
</html>
示例 2
在下面的示例中，我們向現有類新增一個新類。
<!DOCTYPE html>
<html lang="en">
<head>
<title>class</title>
</head>
<style>
.CSS {
color: blueviolet;
font-style: italic;
background-color: rgb(227, 171, 171);
}
</style>
<body>
<button onclick="addClass()">AddClass</button>
<h3 id="heading" class="head">Tutorialspoint easy to learn</h3>
<script>
function addClass() {
var add_class = (document.getElementById("heading").className = " CSS");
//add_class.className += "CSS";
}
</script>
</body>
</html>
點選按鈕（Add class）之前。這裡類沒有改變。
點選按鈕（Add Class）之後。這裡類從head變為CSS。
更新於：2022年12月19日
809 次瀏覽
廣告