Element: className 屬性

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

Element 介面的 className 屬性用於獲取和設定指定元素的 class 屬性 的值。

一個字串變數,表示當前元素的類名或以空格分隔的類名。

示例

js
const el = document.getElementById("item");
el.className = el.className === "active" ? "inactive" : "active";

注意

該屬性的名稱使用 className 而不是 class,是因為 class 是許多用於操作 DOM 的語言中的關鍵字,存在命名衝突。

如果 element 是一個 SVGElement,那麼 className 也可以是 SVGAnimatedString 的一個例項。如果您正在處理 SVG 元素,使用 Element.getAttributeElement.setAttribute 來獲取/設定元素的 class 屬性會更容易。但是,請注意,如果 elementclass 屬性 為空,Element.getAttribute 將返回 null 而不是 ""

js
elm.setAttribute("class", "my-class");
const myClass = elm.getAttribute("class");

注意: class 是一個 HTML 屬性的名稱,而 className 是一個 DOM 屬性的名稱。

規範

規範
DOM
# ref-for-dom-element-classname①

瀏覽器相容性

另見