JavaScript は :hover のような CSS 疑似クラス スタイルを直接操作できますか?

JavaScript を使用した CSS 擬似クラス スタイルの操作

:hover などの CSS 擬似クラス ルールを JavaScript から動的に変更できますか?もしそうなら、どのようにして？この質問は Web 開発者を困惑させており、そのような機能は不可能だと考える人もいます。 JavaScript と疑似クラス セレクターの相互作用の可能性と制限について詳しく見てみましょう。

直接ターゲットはサポートされていません

残念ながら、ブラウザには特定の要素をターゲットにする簡単な方法が提供されていません。疑似クラススタイルを使用します。これは、JavaScript コード内で a:hover { color: red } を直接設定できないことを意味します。

スタイルシートの変更

別のアプローチは、スタイルシート自体を変更することです。 #elid:hover {background: red } などのルールをスタイルシートに追加すると、一意の ID に基づいて要素のスタイルを設定できます。

さまざまなブラウザーの構文

ブラウザによっては、スタイルシートを操作するための構文が異なります。さまざま:

• 標準ブラウザ:

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

• インターネットExplorer:

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

癖と制限事項

JavaScript を使用した動的スタイルシートの操作は扱いにくい場合があり、通常は推奨されません。ブラウザ間の互換性に関する潜在的な問題と、より安定した代替手段の可用性。

以上がJavaScript は :hover のような CSS 疑似クラス スタイルを直接操作できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。