JavaScript を使用して WebKit で CSS 擬似要素を動的にスタイル設定するにはどうすればよいですか?

WebKit の JavaScript による動的 CSS 擬似要素のスタイル設定

JavaScript を通じて CSS 擬似要素のスタイルを動的に変更することは、一般的な課題でした開発者向け。特に Webkit ブラウザでは、背景や表示設定などのプロパティを操作しようとすると、null エラーが返されることがよくあります。

回避策の 1 つは、より現代的で汎用性の高いアプローチを提供する CSS 変数を利用することです。 CSS で変数を定義すると、その後 JavaScript でその値を操作し、それを擬似要素に適用できます。

CSS で、次のように CSS 変数を宣言します。

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

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

次に、JavaScript で #editor 要素の --scrollbar-background 変数を調整して、スクロールバーの外観を動的に変更します。

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

この方法は、擬似要素の直接スタイル操作の制限に効果的に対処します。 Webkit ブラウザーで使用できると同時に、CSS 変数をサポートしていない古いブラウザーとのシームレスな相互運用性も提供します。

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