1. ホーム
  2. javascript

[解決済み] JavaScriptでクラスを追加/削除するには?

2023-07-23 06:53:57

質問

では element.classList はIE 9とSafari-5でサポートされていないので、代替のクロスブラウザ・ソリューションは何ですか?

フレームワークなし をお願いします。

解決方法 しなければならない で動作します。 IE 9 , サファリ 5 FireFox 4、Opera 11.5、およびChromeです。

関連記事(ただし、解決策は含まれていません)。

  1. cssクラスの追加と削除の方法

  2. アニメーション付きクラスの追加と削除

  3. 削除クラスを追加しますか?

どのように解決するのですか?

フレームワークやライブラリを使わずにクラスで遊ぶ方法の1つは、Element.classNameというプロパティを使って、quot; は、指定された要素の class 属性の値を取得および設定します。 " (これは MDN ドキュメント ).

として マティアス-フィデムライザー が彼の回答ですでに言及したように、いったん要素のクラスの文字列を得ると、それを修正するために文字列に関連する任意のメソッドを使用できます。

以下はその例です。

IDが "myDiv"のdivがあり、ユーザーがそれをクリックしたときにクラス "main__section"を追加したいと仮定しています。

window.onload = init;

function init() {
  document.getElementById("myDiv").onclick = addMyClass;
}

function addMyClass() {
  var classString = this.className; // returns the string of all the classes for myDiv
  var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space)
  this.className = newClass; // sets className to the new string
}