javascript classListを利用してhtmlタグにクラスを追加するサンプル

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122(Official Build) (64 ビット)

構文
let 変数名 = document.getElementById(“foo");
// クラスを追加
変数名.classList.add(クラス名);
classList.addを使用して、指定したhtmlタグにクラスを追加します。

使用例

<!DOCTYPE html>
<html>
<body>

<h2 id="cft" class="tt ttpri"></h2>

  <button onclick="myFunction()">追加</button>

<script>
function myFunction() {
// 要素を取得
let kk = document.getElementById("cft");

// クラスを追加
kk.classList.add('mu');
kk.classList.add('add','pp'); //複数追加可能

}
</script>

</body>
</html>

実行結果
「追加」ボタンを押すと、要素「id="cft"」にクラスを追加します。

JavaScript

Posted by arkgame