JavasScript classListのaddメソッドでhtmlタグ要素にクラスを追加する

環境
Google Chrome  115.0.5790.171(Official Build) (64 ビット)
Windows 11 Pro 64bit

構文
let 変数名 = document.getElementByid(セレクターID名)
変数名.classList.add(クラス名)

add(token0)
add(token0, token1)
add(token0, token1, /* … ,*/ tokenN)
tokenN DOMTokenList に追加するトークン(またはトークン群)を表す文字列です。
add() は DOMTokenList インターフェイスのメソッドで、指定されたトークンをリストに追加します。

使用例

<!DOCTYPE html>
<html>
<body>

<div id="city" class="test"><p>東京</p></div>
<br>
<button onclick="funA()">追加</button>

<script>
function funA() {
// 要素を取得
let elm = document.getElementById("city");

// クラスを追加
elm.classList.add('cft');
 //複数追加可能
elm.classList.add('cft','info');

}
</script>

</body>
</html>

実行結果
「追加」ボタンを押下すると、htmlタグにクラス「class="test cft info"」を追加します。

JavaScript

Posted by arkgame