Vanilla JavaScriptで要素にクラスを追加する方法 — classList.add()の使い方

HTML要素にクラスを追加するのは、JavaScriptのclassListプロパティが持つadd()メソッドを使えばとても簡単です。まずは基本的な書式を確認し、そのあとに実際のコード例を見ていきましょう。

基本の書式

var element = document.querySelector("selector")
element.classList.add("class")

上記の汎用的な例では、まず指定したセレクター名(要素セレクター、クラスセレクターなど)に一致するページ上の最初のHTML要素を取得し、その参照を変数に格納しています。

その後、対象の要素に対してclassListプロパティのadd()メソッドを呼び出し、追加したいクラス名を引数として渡します。

classListの実践例

それでは、今あなたが読んでいるこのページの最初の段落(p要素)を取得して、bg-redというクラスを追加してみましょう。

var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")

実行すると、次のような結果になります。

補足:bg-redクラスは筆者のサイトのCSSスタイルシートに定義されているため、このように反映されます。定義内容は以下のとおりです。

.bg-red {
  background-color: #cf4b32;
}

classListのadd()メソッドを使えば、色やフォントサイズなど、どんなCSSプロパティを持つカスタムクラスでも自由に追加できます。自分のスタイルシートに合わせて、さまざまなクラスを試してみてください。

同じ要素に複数のクラスを一度に追加する

add()メソッドでは、複数のクラス名をカンマ区切りで渡すことで、対象の要素へ一括してクラスを追加できます。先ほどの最初の段落に、3つのクラスをまとめて追加してみましょう。

var firstParagraph = document.querySelector("p")

firstParagraph.classList.add("text-center", "text-xxl", "italic")

これにより、ページ上の最初の段落は中央揃えになり、大きなフォントサイズかつイタリック体で表示されます。ぜひご自身の環境でも試してみてください。

参考リソース

• MDN Web Docs: element.classList