HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのclassListプロパティとは？使い方と主要メソッドをわかりやすく解説

HTML DOMのclassListプロパティは、HTML要素に関連付けられたクラス名を取得するためのプロパティです。戻り値はDOMTokenListという形式で、これは空白区切りのトークンの集合を表します。classListプロパティを利用すると、要素に対するCSSクラスの追加・削除・切り替え（トグル）を簡単に行うことができます。

classListプロパティ自体は読み取り専用ですが、add()メソッドやremove()メソッドを使うことで、要素のクラスを追加・削除できます。

classListのプロパティ

classListには以下のプロパティがあります。

プロパティ説明
lengthリストに含まれるクラスの数を返します。読み取り専用です。

classListのメソッド

classListには以下のメソッドがあります。

メソッド説明
add(class1, class2, class3...)要素に1つ以上のクラス名を追加します。すでに同じクラスが存在する場合は、重複して追加されることはありません。
contains(class)要素が指定したクラス名を持っているかどうかを真偽値（Boolean）で返します。trueなら指定したクラス名を含み、falseなら含まないことを意味します。
item(index)指定したインデックス番号に対応するクラス名を返します。インデックスは0から始まり、範囲外の番号を指定した場合はnullが返されます。
remove(class1, class2, class3...)要素から1つ以上のクラス名を削除します。remove()で指定したクラスが存在しない場合でも、エラーは発生しません。
toggle(class, true|false)要素のクラス名を切り替えます。第1引数に指定したクラスが存在しない場合は追加してtrueを返し、すでに存在する場合は削除してfalseを返します。第2引数は省略可能で、真偽値を渡すと現在の状態に関係なく、クラスの追加または削除を強制できます。

構文

classListプロパティの構文は以下のとおりです。

element.classList

サンプルコード

HTML DOMのclassListプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
   .firstDiv {
      width: 200px;
      height: 200px;
      padding: 15px;
      border: 1px double blue;
      position:relative;
      top:10px;
   }
   .secondDiv {
      background-color: lightgreen;
      color: red;
   }
   .thirdDiv {
      text-transform: capitalize;
      text-align: center;
      font-size: 30px;
   }
</style>
</head>
<body>
<p>下のボタンをクリックすると、div要素にクラスが追加されます</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1">
sample div
</div>
<script>
   function classAdd() {
      document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、最初は次のように表示されます。

HTML DOMのclassListプロパティとは？使い方と主要メソッドをわかりやすく解説

「ADD CLASS」ボタンをクリックすると、次のようになります。

HTML DOMのclassListプロパティとは？使い方と主要メソッドをわかりやすく解説

コードの解説

この例では、まずdiv要素と、後からdivへ追加する3つのCSSスタイルクラスを定義しています。

.firstDiv {
   width: 200px;
   height: 200px;
   padding: 15px;
   border: 1px double blue;
   position:relative;
   top:10px;
}
.secondDiv {
   background-color: lightgreen;
   color: red;
}
.thirdDiv {
   text-transform: capitalize;
   text-align: center;
   font-size: 30px;
}
<div id="DIV1">
sample div
</div>

次に、クリックされたときにclassAdd()関数を実行する「ADD CLASS」ボタンを作成しています。

<button onclick="classAdd()">ADD CLASS</button>

classAdd()関数は、idに「DIV1」が設定された要素（この例では<div>要素）を取得し、classListプロパティのadd()メソッドを使って、firstDiv・secondDiv・thirdDivの3つのクラスを<div>要素に一括で追加しています。

function classAdd() {
   document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
  1. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明