JavaScript　スタイルクラスを動的に設定、削除する方法

JavaScriptを使用してHTML要素のスタイルクラスを動的に設定したり削除したりする方法を解説します。

Webページのスタイルクラスを動的に設定したいんですが、どうやってやるんですか？

スタイルクラスを動的に設定するには、classListプロパティとclassNameプロパティの2つの方法があります。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

classListプロパティを使用する方法

　スタイルクラスを動的に設定する方法として、classListプロパティを使用する方法があります。classListプロパティを使用すると、要素のクラスリストに追加、削除、切り替えを行うことができます。

以下は、classListプロパティを使用して要素に新しいクラスを追加する方法の例です。

var element = document.getElementById("myDiv");
element.classList.add("myClass");

　この例では、idが「myDiv」である要素に「myClass」というクラスを追加することができます。このように、classListプロパティを使用して要素に新しいクラスを追加することで、その要素に対して簡単にスタイルを適用することができます。

また、classListプロパティを使用してクラスを削除することもできます。以下は、削除する方法の例です。

var element = document.getElementById("myDiv");
element.classList.remove("myClass");

　この例では、idが「myDiv」である要素から「myClass」というクラスを削除することができます。

　また、クラスが存在するかどうかを確認するために、classListプロパティのcontainsメソッドを使用することもできます。以下は、containsメソッドを使用してクラスが存在するかどうかを確認する方法の例です。

var element = document.getElementById("myDiv");
if (element.classList.contains("myClass")) {
  // "myClass"が要素のクラスリストに含まれている場合の処理
} else {
  // "myClass"が要素のクラスリストに含まれていない場合の処理
}

　この例では、idが「myDiv」である要素に「myClass」というクラスが含まれているかどうかを確認し、条件に応じた処理を行うことができます。

classListプロパティを使用したサンプルプログラム

classListプロパティを使用したサンプルプログラムとその解説を紹介します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>classListプロパティを使用する方法</title>
    <style>
      .selected {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p id="sample">JavaScriptを勉強中です。</p>
    <button onclick="addStyle()">スタイルを追加する</button>
    <button onclick="removeStyle()">スタイルを削除する</button>
    <script>
      function addStyle() {
        var element = document.getElementById("sample");
        element.classList.add("selected");
      }
      function removeStyle() {
        var element = document.getElementById("sample");
        element.classList.remove("selected");
      }
    </script>
  </body>
</html>

上記のサンプルでは、addStyle()関数で、まずdocument.getElementById("sample")を使用して、id属性がsampleである要素を取得しています。取得した要素に対して、classList.add()を使用してselectedクラスを追加しています。これにより、要素に対して定義されている.selectedクラスが適用され、背景色が黄色に変わります。

removeStyle()関数では、まずdocument.getElementById("sample")を使用して、id属性がsampleである要素を取得しています。取得した要素に対して、classList.remove()を使用してselectedクラスを削除しています。これにより、要素に対して定義されている.selectedクラスが削除され、背景色が元の状態に戻ります。

classNameプロパティを使用する方法

　次に、classNameプロパティを使用してスタイルクラスを動的に設定、削除する方法について解説します。

　要素に新しいクラスを追加するには、classNameプロパティの値に追加したいクラス名を追加して、その要素のclass属性に設定します。

以下の例では、idが「myDiv」である要素に「myClass」というクラスを追加しています。

<div id="myDiv">Hello World!</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    var element = document.getElementById("myDiv");
    element.className += " myClass";
  }
</script>

　このコードでは、最初に「Hello World!」というテキストが含まれるdiv要素が定義されています。その下に、「Add Class」というボタンがあります。ボタンをクリックすると、上記のJavaScriptコードが呼び出され、idが「myDiv」である要素に「myClass」というクラスが追加されます。

　次に、要素からクラスを削除するには、classNameプロパティの値から削除したいクラス名を取り除いて、その要素のclass属性に設定します。以下の例では、idが「myDiv」である要素から「myClass」というクラスを削除しています。

<div id="myDiv" class="myClass">Hello World!</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    var element = document.getElementById("myDiv");
    var classes = element.className.split(" ");
    var index = classes.indexOf("myClass");
    if (index !== -1) {
      classes.splice(index, 1);
      element.className = classes.join(" ");
    }
  }
</script>

　このコードでは、最初に「Hello World!」というテキストが含まれるdiv要素が定義されています。その下に、「Remove Class」というボタンがあります。ボタンをクリックすると、上記のJavaScriptコードが呼び出され、idが「myDiv」である要素から「myClass」というクラスが削除されます。

classNameプロパティを使用したサンプルプログラム

classNameプロパティを使用したサンプルプログラムを紹介します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>classNameプロパティを使用する方法</title>
    <style>
      .selected {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p id="sample">JavaScriptを勉強中です。</p>
    <button onclick="addStyle()">スタイルを追加する</button>
    <button onclick="removeStyle()">スタイルを削除する</button>
    <script>
      function addStyle() {
        var element = document.getElementById("sample");
        element.className = "selected";
      }
      function removeStyle() {
        var element = document.getElementById("sample");
        element.className = "";
      }
    </script>
  </body>
</html>

上記のサンプルでは、addStyle()関数で、まずdocument.getElementById("sample")を使用して、id属性がsampleである要素を取得しています。取得した要素に対して、classNameプロパティにselectedを代入しています。これにより、要素に対して定義されている.selectedクラスが適用され、背景色が黄色に変わります。

removeStyle()関数では、まずdocument.getElementById("sample")を使用して、id属性がsampleである要素を取得しています。取得した要素に対して、classNameプロパティに空文字を代入しています。これにより、要素に対して定義されている.selectedクラスが削除され、背景色が元の状態に戻ります。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。