JavaScript は CSS 疑似クラス ルールを直接変更できますか?

JavaScript を使用した疑似クラス CSS ルールの変更

CSS を使用する場合、多くの場合、要素の状態に基づいて特定のスタイルを要素に適用することが必要になります。または相互作用。 :link、:hover、:active などの疑似クラス セレクターを使用すると、さまざまな状態の要素にルールを設定できます。ただし、JavaScript を使用してこれらのルールを動的に変更したい場合はどうすればよいでしょうか?

疑似クラス ルールは JavaScript から変更できますか?

疑似クラスの変更は直感的に思えるかもしれませんが、 JavaScript からの -class ルールを使用することは、直接には不可能です。疑似クラス セレクターは、DOM 内の位置や特定の要素属性に関係なく、スタイルを一致するすべての要素にグローバルに適用します。

代替アプローチ

目的の結果を達成するには効果がある場合は、次の代替アプローチを検討してください:

• 個人の操作要素: 状態に基づいて特定の要素をターゲットにし (ボタンにホバーするなど)、JavaScript の要素スタイル メソッドを使用して目的のスタイルを適用します。これにより、個々の要素のスタイルをより細かく制御できます。
• スタイルシートの変更: スタイルシート内の CSS ルールをプログラムで追加または変更できます。たとえば、特定の要素 (#button:hover など) に固有のルールを作成し、必要なスタイルを適用します。これにより、一般的な擬似クラス ルールを変更せずに、特定の要素に擬似クラスのようなスタイルを適用できます。

要素スタイルの使用例

const buttonElement = document.querySelector('button');

buttonElement.addEventListener('mouseenter', () => {
  buttonElement.style.backgroundColor = 'red';
});

buttonElement.addEventListener('mouseleave', () => {
  buttonElement.style.backgroundColor = 'inherit';
});

スタイルシートを使用した例変更

const stylesheet = document.styleSheets[0];

stylesheet.insertRule('#button:hover { background-color: red; }', 0);

ブラウザのサポート

JavaScript を使用したスタイルシートの動的操作は、ほとんどの最新のブラウザでサポートされています。ただし、古いブラウザや JavaScript 機能が制限されているブラウザでは、これらの技術が完全にはサポートされていない可能性があります。

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