Element: className プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

className は Element インターフェイスのプロパティで、この要素の class 属性の値を取得したり設定したりします。

値

文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。

例

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

メモ

このプロパティでは、 className という名前が class の代わりに使用されています。 これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。

className は SVGAnimatedString のインスタンスにも、element が SVGElement であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の className は Element.getAttribute や Element.setAttribute を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の class 属性が空であった場合、Element.getAttribute は"" ではなく null を返すことに注意してください。

js
elm.setAttribute("class", elm.getAttribute("class"));

メモ: class は HTML 属性であり、 className は DOM プロパティです。

仕様書

Specification
DOM Standard
# ref-for-dom-element-classname①

ブラウザーの互換性

BCD tables only load in the browser

関連情報