HTML DOM Element className
示例
設定元素的 class 屬性
element.className = "myStyle";
自己動手試一試 »
獲取 "myDIV" 的 class 屬性
let value = document.getElementById("myDIV").className;
自己動手試一試 »
在兩個類名之間切換
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
自己動手試一試 »
更多示例見下文。
描述
className 屬性設定或返回元素的 class 屬性。
語法
返回 className 屬性
HTMLElementObject.className
設定 className 屬性
HTMLElementObject.className = class
屬性值
| 值 | 描述 |
| 類別 | 元素的類名。 多個類名用空格分隔，例如 "test demo"。 |
返回值
| 型別 | 描述 |
| 字串 | 元素的類名，或用空格分隔的類名列表 |
更多示例
獲取第一個 <div> 元素（如果有）的 class 屬性
let value = document.getElementsByTagName("div")[0].className;
自己動手試一試 »
獲取包含多個類的 class 屬性
<div id="myDIV" class="myStyle test example">
<p>我是 myDIV。</p>
</div>
let value = document.getElementById("myDIV").className;
自己動手試一試 »
如果 "myDIV" 有 "myStyle" 類，則改變字型大小
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
自己動手試一試 »
如果從頁面頂部滾動 50 畫素，則新增 "test" 類
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
自己動手試一試 »
瀏覽器支援
element.className 支援所有瀏覽器
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
