ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は CSS 疑似クラス ルールを直接変更できますか?
JavaScript を使用した疑似クラス CSS ルールの変更
CSS を使用する場合、多くの場合、要素の状態に基づいて特定のスタイルを要素に適用することが必要になります。または相互作用。 :link、:hover、:active などの疑似クラス セレクターを使用すると、さまざまな状態の要素にルールを設定できます。ただし、JavaScript を使用してこれらのルールを動的に変更したい場合はどうすればよいでしょうか?
疑似クラス ルールは JavaScript から変更できますか?
疑似クラスの変更は直感的に思えるかもしれませんが、 JavaScript からの -class ルールを使用することは、直接には不可能です。疑似クラス セレクターは、DOM 内の位置や特定の要素属性に関係なく、スタイルを一致するすべての要素にグローバルに適用します。
代替アプローチ
目的の結果を達成するには効果がある場合は、次の代替アプローチを検討してください:
要素スタイルの使用例
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 サイトの他の関連記事を参照してください。