更多"Try it Yourself"下面的例子。
定義和用法
className屬性集或返回元素（元素的類屬性的值）的類名。
提示：性質相近的className是班級列表屬性。
瀏覽器支持
| 屬性 | |||||
|---|---|---|---|---|---|
| className | 是 | 是 | 是 | 是 | 是 |
句法
返回className屬性：
HTMLElementObject .className設置className屬性：
HTMLElementObject .className= class 屬性值
| 值 | 描述 |
|---|---|
| class | 指定元素的類名。 要應用多個類，他們用空格隔開，像"test demo" |
技術細節
| 返回值： | 一個字符串，表示類，或一個類的空格分隔的列表，元素的 |
|---|
更多示例
例
得到的第一個的類名<div>在文檔中元件(if any) ：
var x = document.getElementsByTagName("DIV")[0].className; x的結果將是：
mystyle 試一試» 例
如何獲得一個元素的類名的其他例子：
var x = document.getElementsByClassName("mystyle")[0].className;
var y =
document.getElementById("myDIV").className; 試一試» 例
獲取多類元素的類名：
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
var x = document.getElementById("myDIV").className;x的結果將是：
mystyle text example 試一試» 例
覆蓋現有的類名與一個新問題：
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName"; 試一試» 例
如果有一類"mystyle"在使用id =“myDIV”的元素，改變字體大小：
var x = document.getElementById("myDIV");
if (x.className ===
"mystyle") {
x.style.fontSize = "30px";
} 試一試» 例
當用戶向下滾動從頂部50個像素，類名-在不同的滾動位置的類名之間切換"test"將被添加到一個元素(and removed when scrolled up again) 。
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
}
else {
document.getElementById("myP").className
= "";
}
}
試一試» 相關頁面
CSS教程： CSS選擇器
CSS參考： CSS選擇器的.class
HTML DOM參考： HTML DOM classList Property
HTML DOM參考： HTML DOM getElementsByClassName()方法
HTML DOM參考： HTML DOM Style對象
<元素對象