JavaScript は CSS 擬似要素スタイルを動的に変更できますか?

JavaScript を使用した CSS 疑似要素のスタイルの変更: 詳細

次の方法で CSS 疑似要素のスタイルを動的に変更することは可能ですか? JavaScript?スクロールバーの色を設定して完全に非表示にしたいとします。ただし、次のようなスクリプトを使用すると、「null のプロパティ 'style' を読み取れません」エラーが返されます。

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

Webkit ブラウザでは効果的に機能し、他のブラウザでは正常に機能を低下させる代替アプローチを検討してみましょう。

CSS 変数の利用スタイリング

最新のブラウザでは、JavaScript からカスタム CSS プロパティを定義および操作する強力な方法を提供する CSS 変数 (CSS Vars) が提供されています。 CSS 変数を使用すると、ブラウザ間の互換性を維持しながら、目的のスタイル効果を実現できます。

CSS で、CSS 変数 --scrollbar-background を定義し、スクロールバーのサムに適用します。

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

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

次に、JavaScript で #editor の --scrollbar-background プロパティを変更します。 element:

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

JavaScript と組み合わせて CSS Vars を利用することで、疑似要素のスタイルを簡単に変更し、幅広い Web ブラウザー間での互換性を確保できます。

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