javascript htmlタグにクラスを追加する

javascript htmlタグにクラスを追加する

javascriptで、classList.addを使用して、htmlタグにクラスを追加するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

classList.add使い方

classList.addを使用すれば、指定したhtmlタグにクラスを追加することが可能です。

実行結果

toggleを使用して追加することもできます。
toggleはクラスがなければ追加、あれば削除します。

classList.add小ネタ

また、classListは配列を利用して、以下のように記述することも可能です。
※厳格モード「use strict」だとエラーとなります。

ちなみに「`」を使用すれば、カッコも省略できます。

サンプルコード

以下は、
「追加」ボタンをクリックすると、指定した要素クラスを追加して、事前に記述してあるcssを適応させる
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

クラスが追加されていることが確認できます。