JavaScript から CSS 疑似クラス ルールを動的に変更するにはどうすればよいですか?

JavaScript からの CSS 疑似クラス ルールの変更

JavaScript から CSS 疑似クラス セレクターを動的に変更しようとすると、次のような認識に遭遇する可能性があります。これらのルールを直接操作することは不可能です。 :link や :hover などの疑似クラスはグローバル スコープで動作し、それぞれの基準に一致するドキュメント内のすべての要素に影響を与えます。

考えられる回避策の 1 つは、スタイルシート自体の変更です。一意の ID を持つ特定の要素を対象とするルールを追加することで、疑似クラス スタイルを適用できるようになります。

#elid:hover { background: red; }

各要素に一意の ID があると仮定すると、この手法により対象を絞ったスタイリングが可能になります。

代わりに、DOM-Level-2-Style 仕様では、より標準化されたアプローチが提供されています:

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);

IE ただし、独自の構文が必要です:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);

これらのメソッドは柔軟性が高くなりますが、欠点もあります。動的スタイルシートの操作は複雑で、エラーが発生しやすい場合があります。さらに、古いブラウザやあまり一般的ではないブラウザでは、この機能がサポートされていない可能性があります。したがって、そのようなアプローチを実稼働コードに実装する前に、その必要性と実現可能性を比較検討することが重要です。

以上がJavaScript から CSS 疑似クラス ルールを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。