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>追加</button> <script> function myFunction() { // 要素を取得 let kk = document.getElementById("cft"); // クラスを追加 kk.classList.add('mu'); kk.classList.add('add','pp'); //複数追加可能 } </script> </body> </html>
実行結果
「追加」ボタンを押すと、要素「id="cft"」にクラスを追加します。