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