JavaScript で CSS 擬似要素を動的に操作するにはどうすればよいですか?

JavaScript を使用した CSS 擬似要素の操作

JavaScript を使用した CSS 擬似要素スタイルの動的変更は、CSS を含むさまざまな手法を使用することで実現できます。変数とベンダー固有property.

CSS 変数

Webkit ブラウザの場合、疑似要素を操作するためのシンプルでブラウザ間互換性のあるソリューションは CSS 変数です。これらの変数を使用すると、CSS でスタイルを定義し、JavaScript でスタイルにアクセスして変更することができます。このメソッドを適用するには:

• スタイル シートで次のような CSS 変数を定義します。

#editor {
  --scrollbar-background: #ccc;
}

• 疑似要素スタイルでは、これを参照します。 var(--scrollbar-background) を使用して変数を設定します。例:

#editor::-webkit-scrollbar-thumb:vertical {
  background-color: var(--scrollbar-background);
}

• 擬似要素のスタイルを動的に変更するには、JavaScript で CSS 変数の値を変更します。

document.getElementById("editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

ベンダー固有プロパティ

WebKit スクロールバーなどのベンダー固有の疑似要素を直接ターゲットにするには、JavaScript で対応するベンダー プレフィックスを使用できます。たとえば、次のコードはスクロールバーのサムの背景色を設定します:

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.backgroundColor = localStorage.getItem("Color");

スクロールバーを非表示にするには、ベンダー固有のプロパティ -webkit-overflow-scrolling を使用します:

document.querySelector("#editor::-webkit-scrollbar").style.webkitOverflowScrolling = "hidden";

注: これらのベンダー固有のプロパティに対するブラウザのサポートは異なる場合があります。これらの手法を実稼働コードで使用する前に、互換性マトリックスを確認することをお勧めします。

以上がJavaScript で CSS 擬似要素を動的に操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。