javascript classList.replaceを使用してクラスを入れ替える

javascript classList.replaceを使用してクラスを入れ替える

javascriptで、classList.replaceを使用して、クラスを入れ替えるサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

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

classList.replace使い方

querySelectorを使用することで、classを入れ替えることが可能です。

実行結果

存在しないクラス名を指定すると、エラーにはならず、falseが返ります。

classList.replace小ネタ

‘use strict’だとエラーになりますが、以下のように配列でメソッドにアクセスすることも可能です。

一度定義すると、以下のように変数として利用できます。

ちなみに、’use strict’を使用すると「not defined」となります。

サンプルコード

以下は、
「実行」ボタンをクリックすると、指定した要素のクラスを入れ替えて、表示する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

要素のクラスが、変更されていることが確認できます。