既存のクラスを上書きせずに HTML 要素に新しいクラスを追加する方法

既存の要素に追加クラスを追加する方法

目的:
追加クラスで HTML 要素を強化する

シナリオ:
既存のクラスを持つ要素が与えられた場合、元のクラスを上書きせずに新しいクラスを追加することを目指します。

解決策:

最新のブラウザの場合

を使用classList プロパティを使用すると、要素にクラスを簡単に追加できます:

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

同様に、クラスを削除するには:

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

レガシー サポートの場合

対応するInternet Explorer 9 などの古いブラウザの場合は、スペースの後に新しいクラス名を追加して、要素の className プロパティを変更します。前提条件として、アクセスしやすいように要素に ID を割り当てます:

<div>
<p>次に、JavaScript を使用します:</p>
<pre class="brush:php;toolbar:false">var d = document.getElementById("div1");
d.className += " otherclass";

既存のクラスを保持するために、「otherclass」の前に必ず先頭のスペースを含めてください。クラス修飾子。

追加の考慮事項

Mozilla を参照してください。 element.className.

に関する包括的なドキュメントのための開発者ネットワーク (MDN)