ホームページ >ウェブフロントエンド >CSSチュートリアル >jQuery SVG クラスの操作: `addClass()` と `removeClass()` が失敗するのはなぜですか?

jQuery SVG クラスの操作: `addClass()` と `removeClass()` が失敗するのはなぜですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-21 22:27:52810ブラウズ

jQuery SVG Class Manipulation: Why Do `addClass()` and `removeClass()` Fail?

jQuery SVG: クラスを操作できないのはなぜですか?

jQuery を使用して SVG 要素を操作する場合、クラスの追加または削除で問題が発生する可能性があります。これは構文エラーではありませんが、jQuery 内の制限に起因します。

jQuery の制限

3 より前の jQuery バージョンには、SVG 要素との対話における既知の制限があります。具体的には、.addClass() メソッドと .removeClass() メソッドが意図したとおりに機能しない可能性があります。

.attr() を使用した回避策

jQuery 内での 1 つの回避策は、.attr() メソッドを使用することです。 :

// Adding a class
$("#item").attr("class", "oldclass newclass");

// Removing a class
$("#item").attr("class", "oldclass");

バニラ JavaScript の代替

jQuery 以外のソリューションでは、element.classList.add() メソッドと element.classList.remove() メソッドを利用できます:

// Adding a class
var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass");

// Removing a class
element.setAttribute("class", "oldclass");

以上がjQuery SVG クラスの操作: `addClass()` と `removeClass()` が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。