HTML class属性

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>

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

JavaScriptからHTML要素のclass属性を参照又は設定するには、2つの方法がある。

className

element オブジェクトの className プロパティは、HTML要素のすべてのクラスを表わす。

document.getElementById('#id').className = 'container mx-auto'

classList

element オブジェクトの className プロパティは、HTML要素の個々のクラスを表わす。

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 */
} 

classListから個々のクラスに対して繰返し処理を行うことができる。

if (cls in document.getElementById('#id').classList) {
  console.log(cls)
} 

関連記事

dir

参考文献

Web Hypertext Application Technology Working Group (2022) "Semantics, structure, and APIs of HTML documents" HTML Living Standard