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>追加</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"」を追加します。