VanillaJavaScriptを使用して要素にクラスを追加する方法

JavaScriptのclassListプロパティメソッドadd()を使用すると、HTML要素にクラスを追加するのは簡単です。 。まず、一般的な式を簡単に見て、実際の例をフォローアップします。

式

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

上記の一般的な例では、最初のHTML要素が見つかります 指定されたセレクター名のページ （要素セレクター、クラスセレクターなど）、変数を使用してそれへの参照を格納します。

次に、classListプロパティのを添付します add() 要素にメソッドを追加し、追加するクラスを指定します。

実用的なclassListの例

今読んでいるこのページの最初の段落要素を見つけて、bg-redのクラスを付けてみましょう。 。

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

そしてその結果：

注：私はbg-redを持っています 私のウェブサイトのCSSスタイルシートのクラス、それが機能する理由です。クラスは次のようになります：

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

classList addメソッドを使用して、色からフォントサイズまで、任意のCSSプロパティを使用して任意のカスタムクラスを追加できます。

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

ターゲット要素に同時に多数のクラスを簡単に追加できます。最初の段落要素に3つのクラスを追加してみましょう：

var firstParagraph = document.querySelector("p")

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

これにより、このページの最初の段落が中央揃えになり、フォントサイズが大きくなり、斜体になります。自分で試してみてください。

リソース

• MDN Web Docs element.classList