className屬性將指定元素的class屬性值設置或返回為字符串。
如果指定的元素沒有類屬性或未設置類屬性,則返回一個null字符串。
返回className屬性:
element.className
設置className屬性:
element.className = cName
document.getElementById("x").className = "para";測試看看?/?所有瀏覽器完全支持className屬性:
| 屬性 | ![]() | ![]() | ![]() | ![]() | ![]() |
| className | 是 | 是 | 是 | 是 | 是 |
| 值 | 描述 |
|---|---|
| cName | 一個字符串變量,表示當前元素的類或以空格分隔的類 |
| 返回值: | 一個字符串,表示元素的類或類的空格分隔列表 |
|---|---|
| DOM版本: | DOM級別1 |
返回第一個<div>元素的類名稱:
var x = document.getElementsByTagName("div")[0].className;測試看看?/?用新名稱覆蓋現有的類名稱:
<div class="myDiv">這是一個DIV元素</div>
<script>
var x = document.getElementsByTagName("div")[0];
x.className = "anotherClass";
</script>測試看看?/?要將類添加到元素中而不覆蓋現有值,請插入空格和新的類名稱:
<div class="myDiv">這是一個DIV元素</div>
<script>
var x = document.getElementsByTagName("div")[0];
x.className += " anotherClass";
</script>測試看看?/?找出<div>元素是否具有“shadow”類:
var x = document.getElementsByTagName("div")[0];
if (x.className.indexOf("shadow") != -1) {
alert("Yes... The DIV has 'shadow' class");
} else {
alert("False");
}測試看看?/?CSS教程:CSS選擇器
CSS參考:CSS#id選擇器
CSS Reference: CSS .class 選擇器
JavaScript參考:字符串indexOf()方法
HTML DOM參考:HTML DOM classList屬性
HTML DOM參考:HTML DOM getElementsByClassName()方法
HTML DOM參考:HTML DOM getElementById()方法
HTML DOM參考:HTML DOM querySelector()方法