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

JavaScript の要素にクラスを追加する

概要:
要素の機能を強化するWeb ページでは、CSS クラスの操作が必要になることがよくあります。新しいクラスを追加すると、要素に追加のスタイルや動作を提供できます。この回答では、最新のブラウザーと従来のブラウザーのサポートを考慮して、JavaScript を使用して要素にクラスを追加する方法について説明します。

最新のブラウザー (Element.classList)
最新のブラウザーの場合、以下を含みます。 Chrome、Firefox、Safari では、element.classList.add() メソッドを使用して、クラスをクラスに追加する効率的な方法を提供します。要素:

element.classList.add("my-class");

後でクラスを削除するには:

element.classList.remove("my-class");

レガシー ブラウザ (className プロパティ)
Internet Explorer 9 以前のようなブラウザの場合、要素の className プロパティを使用して、新しい要素を追加できます。 class:

var d = document.getElementById("div1");
d.className += " otherclass";

リスト内の既存のクラスを侵害しないように、新しいクラス名の前にスペースがあることを確認してください。

注: element.className プロパティは次のように指定できます。最新のブラウザでも使用されていますが、一般に classList の方がクリーンで効率的なアプローチです。

以上がJavaScript を使用して HTML 要素にクラスを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。