JavaScript を使用して HTML 要素にクラスを追加または削除するにはどうすればよいですか?

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

HTML 要素を操作する場合、多くの場合、JavaScript を使用してクラスを動的に追加または削除する必要があります。 。たとえば、次の HTML を持つ要素があるとします:

<div class="someclass">
    <img ...>

そして、上の div 要素に別のクラスを追加する JavaScript 関数を作成したいとします。

最新のブラウザ

Element.classList プロパティをサポートする最新のブラウザのみを対象としている場合、解決策は次のとおりです。率直な。 classList.add() メソッドを使用して要素に新しいクラスを追加するだけです:

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

クラスを削除するには、classList.remove() メソッドを使用します:

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

Internet Explorer 9 以前

Internet Explorer 9 以前などの古いブラウザの場合は、 classList プロパティをサポートしている場合は、className プロパティを使用できます。まず、要素に ID を割り当てて、取得を容易にします:

<div>

次に、新しいクラス名を既存のクラス名と連結し、それらの間にスペースが追加されていることを確認します:

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

クラス リスト内の既存のクラスとの競合を避けるために、新しいクラス名の前に必ずスペースを含めてください。

これらのアプローチに従うことで、次のことが可能になります。 JavaScript を使用して HTML 要素にクラスを動的に追加または削除し、Web ページのスタイルを柔軟に制御できます。

以上がJavaScript を使用して HTML 要素にクラスを追加または削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。