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

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

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

<div class="someclass">
    <img  ... alt="JavaScript を使用して HTML 要素にクラスを追加または削除するにはどうすればよいですか?" ><p>そして、上の div 要素に別のクラスを追加する JavaScript 関数を作成したいとします。</p>
<p><strong>最新のブラウザ</strong></p>
<p>Element.classList プロパティをサポートする最新のブラウザのみを対象としている場合、解決策は次のとおりです。率直な。 classList.add() メソッドを使用して要素に新しいクラスを追加するだけです:</p>
<pre class="brush:php;toolbar:false">element.classList.add("my-class");

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

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

Internet Explorer 9 以前

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

<div>
<p>次に、新しいクラス名を既存のクラス名と連結し、それらの間にスペースが追加されていることを確認します:</p>
<pre class="brush:php;toolbar:false">var d = document.getElementById("div1");
d.className += " otherclass";

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

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