【コピペ】jsでclassを追加【Javascript】

まず最初に、Javascriptで指定セレクタを持つHTML要素にclassを追加するコードになります。
コピペして自由にお使いください。


// 指定セレクタの要素を取得
var element = document.querySelector('#id_for_addclass'); 
// 取得した要素にclassを追加
element.classList.add("added_class");

実行結果と詳しい解説は以下です。

指定idを持つHTML要素を取得、classを追加

指定セレクタを持つ要素にclassを追加するコードです。

<div id="id_for_addclass">
</div>


// 指定idの要素を取得
var element_id = document.querySelector('#id_for_addclass'); 
// 取得した要素にclassを追加
element_id.classList.add("added_class");

上記コードにより、指定のhtml要素に”added_class”という名前のclassが追加されます。

<!-- 実行結果 -->
<div id="id_for_addclass" class="added_class">
</div>

本記事を書く際に参考にしたMDNの関連ドキュメントです。
こちらも併せてご覧ください。