HTML DOM Element className 屬性

定義和用法

className 屬性設置或返回元素的 class 屬性。

另請參閱：

Element classList 屬性

Document getElementsByClassName() 方法

HTML DOM Style 對象

實例

例子 1

設置元素的 class 屬性：

element.className = "myStyle";

親自試一試

例子 2

獲取 "myDIV" 的 class 屬性：

let value = document.getElementById("myDIV").className;

親自試一試

例子 3

在兩個類名之間切換：

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

親自試一試

提示：頁面下方提供更多實例。

語法

返回 className 屬性：

HTMLElementObject.className

設置 className 屬性：

HTMLElementObject.className = class

屬性值

值 描述
class

元素的類名。

用空格分隔多個類，比如 "test demo"。

返回值

類型 描述
字符串 元素的類，或以空格分隔的類列表。

更多實例

例子 4

獲取第一個 <div> 元素的 class 屬性（如果有）：

let value = document.getElementsByTagName("div")[0].className;

親自試一試

例子 5

獲取具有多個類的 class 屬性：

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

親自試一試

例子 6

用新的 class 屬性覆蓋現有的 class 屬性：

element.className = "newClassName";

親自試一試

例子 7

如需添加新類而不覆蓋現有值，請添加空格和新類：

element.className += " class1 class2";

親自試一試

例子 8

如果 "myDIV" 有 "myStyle" 類，則更改字體大小：

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

親自試一試

例子 9

如果您從頁面頂部滾動 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 IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持

相關頁面

CSS 教程：CSS 語法

CSS 參考手冊：CSS .class 選擇器