JavaScript classList.replace()でclass名を置き換えるサンプル

2023年4月5日

環境
Google Chrome　111.0.5563.147
Windows 10 Home 64bit

書式
document.querySelector('セレクター名’).classList.replace('クラス1’, 'クラス2’);
classList.replace()を使ってclass名を置き換えます。
引数がひとつの場合、また置き換え前と置き換え後のどちらかに空の値を指定した場合は、いずれもパラメータエラーとなりますので注意が必要です。

使用例

<!DOCTYPE html>
<html>
<body>

<div id="ts" class="cityA cityB">東京</div> <br>

<button onclick="funA()">確認</button>

<script>
function funA() {
   //要素を置き換える
  document.querySelector('#ts').classList.replace('cityA', 'cityC');
  console.log(document.querySelector('#ts'));
}
</script>

</body>
</html>

実行結果
「確認」ボタンを押すと、指定class名「cityA」を「cityC」に置き換えます
コンソール画面に下記メッセージを出力します。
<div id="ts" class="cityC cityB">東京</div>

JavaScript

Posted by arkgame

関連記事: