JavaScriptでCSSクラスを操作する！(取得・追加・削除・変更)

2023.10.24

JavaScriptでCSSのクラスを取得・追加・削除・変更する方法について書いています。
実際にdivタグのclass属性に対して、下記のサンプルを書いて動作を確認してみました。

・CSSクラスの取得
・CSSクラスの追加
・CSSクラスの削除
・CSSクラスの変更
・CSSクラスのトグル

CSSのクラスを取得する

CSSのクラスを取得するときには、要素にアクセスしてclassListにアクセスすると良いです。
例えば、下記のように取得することができます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>test page</title>
        <script>
          function fetchCssClass() {
            let testDiv = document.querySelector("#test")

            // classのひとつめにアクセス
            console.log('ひとつめのクラス:' + testDiv.classList[0])

            // classを取得してforEachでループ
            testDiv.classList.forEach((value, index) => {
              console.log(`クラス${index}:` + value)
            })
          }
        </script>
        <style>
          .center-text {
            text-align: center;
          }
          .red-text {
            color: red;
          }
        </style>
    </head>
    <body>
      <div id="test" class="center-text red-text">Hello</div>
      <button onclick="fetchCssClass()">クラスを取得</button>
    </body>
</html>

HTML全体の解説

「クラスを取得」ボタンを押したときに、divタグのクラスを取得するようにしました。

divタグのidが「test」になっています。
class属性には「center-text」と「red-text」のクラスをつけています。

ボタンを押すと、fetchCssClass関数が動いて、divタグのクラスを取得して出力しています。

fetchCssClass関数の解説

fetchCssClass関数では、document.querySelectorでdivタグの要素を取得しました。

取得した要素をtestDiv変数に入れています。
その後に、classListにアクセスすることで、CSSのクラスを取得しています。
最初に「[0]」にアクセスして、0番目の要素を取得しました。

次にclassListからforEachを呼び出して、クラスがある間ループしています。
value変数にクラス名を取得できます。index変数は要素番号になります。
ループすると、2つのクラス名を取得して、出力します。

動作確認

実際に画面を表示して、取得したクラスが出力されるか確認してみましょう。
画面を表示すると、テキストにクラスが効いていることが確認できます。

ボタンを押すと、まず、ひとつめのクラスが出力されます。
その後に全てのクラスが出力されることが確認できました。

javascriptでcssクラス取得

CSSのクラスを追加する

CSSのクラスを追加するのにも、classListを使うと良いです。
classListからaddメソッドを呼んで、追加したいクラスを書きます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>test page</title>
        <script>
          function cssAddClass() {
            let testDiv = document.querySelector("#test")

            // クラスを追加する
            testDiv.classList.add("div-margin")
          }
        </script>
        <style>
          .center-text {
            text-align: center;
          }
          .red-text {
            color: red;
          }
          .div-margin {
            margin-top: 150px;
            margin-bottom: 150px;
          }
        </style>
    </head>
    <body>
      <div id="test" class="center-text red-text">Hello</div>
      <button onclick="cssAddClass()">クラスを追加する</button>
    </body>
</html>

HTML全体の解説

先ほどのHTMLと同様にして、ボタンとcssAddClass関数を用意して、動作を確認しています。
「クラスを追加する」ボタンを押したときに、divタグに対して、クラスを追加するようにしています。

初期値として、divタグのclass属性には「center-text」・「red-text」のクラスをつけています。

「クラスを追加する」ボタンを押すと、cssAddClass関数が動いて、divタグにdiv-marginクラスを追加します。
div-marginクラスは要素に対して、上と下に150pxの余白を作ってくれます。

cssAddClass関数の解説

divタグの要素を取得して、testDiv変数に格納しました。

testDivからclassListを呼び出して、addメソッドでクラスを追加しています。
渡しているのが、追加したいクラス名(div-margin)です。

動作確認

実際に画面を開いて、動作を確認してみました。
画面を開くと、初期設定しているクラスが効いています。

javascriptでcssクラス追加

ボタンを押すと、このようにclass属性にクラスが追加されて、追加されたクラスのスタイルが適用されました。

CSSのクラスを削除する

CSSのクラスを削除するときには、classListからremoveメソッドを呼び、削除したいクラス名を渡します。
例えば、下記のように削除することができます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>test page</title>
        <script>
          function removeCssClass() {
            let testDiv = document.querySelector("#test")

            // red-textクラスの削除
            testDiv.classList.remove('red-text')
          }
        </script>
        <style>
          .center-text {
            text-align: center;
          }
          .red-text {
            color: red;
          }
        </style>
    </head>
    <body>
      <div id="test" class="center-text red-text">Hello</div>
      <button onclick="removeCssClass()">クラスを削除</button>
    </body>
</html>

HTML全体の解説

先ほどのHTMLと同様にして、ボタンとremoveCssClass関数を用意して、動作を確認しています。
「クラスを削除」ボタンを押したときに、divタグのred-textクラスを削除するようにしました。

初期値として、divタグのclass属性には「center-text」・「red-text」のクラスをつけています。

「クラスを削除」ボタンを押すと、removeCssClass関数が動いて、divタグのred-textクラスが消えます。
Helloという文字列が赤色になっていますが、クラスが消えるので、これで黒に戻ります。

removeCssClass関数の解説

最初にdivタグの要素を取得して、testDiv変数に格納しています。

その後にtestDivからclassListを呼び出して、removeメソッドでクラスを削除しています。
渡しているのが、削除したいクラス名(red-text)です。

動作確認

実際に画面を開いて、動作を確認してみます。

javascriptでcssクラスを削除

「クラスを削除」ボタンを押すと、red-textクラスが消えて、文字列の色がデフォルトの黒に戻っていることが確認できました。

CSSのクラスを変更する

CSSのクラスを変更するときには、classListからreplaceメソッドを呼びます。
そうすることで、指定したクラスを置換して、別のクラスに変更することができます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>test page</title>
        <script>
          function replaceCssClass() {
            let testDiv = document.querySelector("#test")

            testDiv.classList.replace('red-text', 'green-text')
          }
        </script>
        <style>
          .center-text {
            text-align: center;
          }
          .red-text {
            color: red;
          }
          .green-text {
            color: green;
          }
        </style>
    </head>
    <body>
      <div id="test" class="center-text red-text">Hello</div>
      <button onclick="replaceCssClass()">クラスを変更</button>
    </body>
</html>

HTML全体の解説

先ほどのHTMLと同様にして、ボタンとreplaceCssClass関数を用意して、動作を確認しています。
初期値として、divタグのclass属性には「center-text」・「red-text」のクラスをつけています。

「クラスを変更」ボタンを押したときに、divタグのred-textクラスを置換して、green-textクラスに変更します。
replaceCssClass関数が動いて、その中の処理で、クラスを変更しています。

処理が終わると、Helloという文字色が赤から緑に変わります。

replaceCssClass関数の解説

最初にdivタグの要素を取得して、testDiv変数に格納しています。

その後にtestDivからclassListを呼び出して、replaceメソッドでクラス名を指定して置換しています。
第1引数に指定したクラス(red-text)から、第2引数に指定したクラス(green-text)に置換されます。

動作確認

実際に画面を開いて、動作を確認してみます。

javascriptでcssクラスを置換

クラスが置換されて、文字列の色が赤から緑に変わりました。

CSSのクラスをトグルする

CSSのクラスをトグルすることもできます。
特定のクラス名がなかったら追加して、存在したら削除するという処理です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>test page</title>
        <script>
          function toggleCssClass() {
            let testDiv = document.querySelector("#test")

            testDiv.classList.toggle('red-text')
          }
        </script>
        <style>
          .center-text {
            text-align: center;
          }
          .red-text {
            font-weight: bold;
            color: red;
          }
        </style>
    </head>
    <body>
      <div id="test" class="center-text red-text">Hello</div>
      <button onclick="toggleCssClass()">クラスをトグル</button>
    </body>
</html>

HTML全体の解説

先ほどのHTMLと同様にして、ボタンとtoggleCssClass関数を用意して、動作を確認しています。
初期値として、divタグのclass属性には「center-text」・「red-text」のクラスをつけています。

「クラスをトグル」ボタンを押したときに、divタグのred-textクラスがあったら削除して、なかったら追加します。
初期では設定されているので、削除されて、もう一度押すと追加されてといった形です。

toggleCssClass関数の解説

最初にdivタグの要素を取得して、testDiv変数に格納しています。

その後にtestDivからclassListを呼び出して、toggleメソッドでクラス名を指定しています。
指定されたクラス名のクラスが存在したら削除して、なかったら追加されます。

動作確認

実際に画面を開いて、動作を確認してみます。

javascriptでcssクラスをトグル

最初にボタンを押すと、red-textクラスがあるので削除されて、もう一度押すと追加といった形でトグルできました。

CSSのクラス操作まとめ

今回はCSSのクラスをclassListプロパティを使って操作しました。
内容をまとめると、下記のようになります。

メソッド 例 内容
classList testDiv.classList[0] 要素番号でのアクセスやforEachメソッドでクラス名を取得できた。
classList.add testDiv.classList.add(“div-margin”) addメソッドに指定したクラスを要素に対して追加できた。
classList.remove testDiv.classList.remove(“red-text”) removeメソッドに指定したクラスを要素から削除できた。
classList.replace testDiv.classList.replace(“red-text”, “green-text”) 第1引数に指定したクラスを第2引数に指定したクラスに置換した。
classList.toggle testDiv.classList.toggle(‘red-text’) toggleメソッドに指定したクラスがあったら削除、なかったら追加する。

classListプロパティから、それぞれのメソッドにアクセスすることで、簡単に削除・追加・変更などを行うことができました。

コメント