如何 - 新增一個類
瞭解如何使用 JavaScript 向元素新增類名。
點選按鈕為我新增一個類!
新增類
步驟 1) 新增 HTML
將一個類名新增到 id="myDIV" 的 div 元素中(在本例中,我們使用一個按鈕來新增該類)。
示例
<button onclick="myFunction()">試一試</button>
<div id="myDIV">
這是一個 DIV 元素。
</div>
步驟 2) 新增 CSS
為指定的類名設定樣式
示例
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
}
步驟 3) 新增 JavaScript
獲取 id="myDIV" 的 <div> 元素,並向其新增 "mystyle" 類
示例
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
自己動手試一試 »
提示:另請參閱 如何切換類。
提示:另請參閱 如何移除類。
提示:在我們的 JavaScript 參考中瞭解有關 classList 屬性的更多資訊。
提示:在我們的 JavaScript 參考中瞭解有關 className 屬性的更多資訊。