CSSのクラスを指定します。複数のクラスをスペース（空白文字）で区切って指定することもできます。class属性は省略可能です。
classはHTMLにおける全ての要素に指定できるグローバル属性である。
全ての要素において、class属性の指定は省略できる。
HTML要素に class 属性を指定するサンプルを次に示す。
<head>
<style>
.container {
max-width: 640px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container mx-auto">
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry,
who was a farmer, and Aunt Em, who was the farmer's wife. Their house was
small, for the lumber to build it had to be carried by wagon many miles.
</div>
</body>上記 HTML の表示結果を以下に示す。
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles.
この段落の最大幅は640ピクセルです。スマホなど画面の幅が小さい場合は横幅いっぱいに表示されますが、パソコンなど画面の幅が大きい場合でも横幅は640ピクセルより大きくなりません。画面の幅が640ピクセルより大きい場合は、中央揃えで表示されます。
JavaScriptからHTML要素のclass属性を参照又は設定するには、2つの方法がある。
element オブジェクトの className プロパティは、HTML要素のすべてのクラスを表わす。
document.getElementById('#id').className = 'container mx-auto'element オブジェクトの classList プロパティは、HTML要素の個々のクラスを表わす。
classListから個々のクラスに対して繰返し処理を行うことができる。
if (cls in document.getElementById('#id').classList) {
console.log(cls)
} classList プロパティは、以下に示すメソッドを持つ。
| メソッド | 説明 |
|---|---|
| add | 指定したクラスをリストに追加する。 |
| remove | 指定したクラスをリストから削除する。 |
| toggle | 指定したクラスがリストの中ににあれば削除、なければ追加する。 |
| contains | 指定したクラスがリストの中ににあれば true、なければ false を返す。 |
HTML要素にクラスを追加する。
document.getElementById('#id').classList.add('container')HTML要素からクラスを削除する。
document.getElementById('#id').classList.remove('container')指定したクラスがHTML要素にあれば削除し、なければ追加する。
document.getElementById('#id').classList.toggle('container')指定したクラスがHTML要素にあればtrueを返し、なければfalseを返す。
if (document.getElementById('#id').classList.contains('container')) {
/* do something */
} Web Hypertext Application Technology Working Group (2022) "Semantics, structure, and APIs of HTML documents" HTML Living Standard