JavaScript でスクロールバーなどの CSS 疑似要素を動的にカスタマイズするにはどうすればよいですか?

JavaScript を使用した CSS 擬似要素の動的カスタマイズ

多くの開発者は、JavaScript を使用して CSS 擬似要素のスタイルを動的に変更するという課題に直面しています。この質問では、JavaScript スクリプトを使用してスクロールバーなどの要素の外観と動作を変更する可能性を検討します。

スクロールバーの色と表示の変更

この質問では、次の 2 つのスクリプトを試みています。スクロールバーの色と可視性を変更する:

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

ただし、これらのスクリプトは次のように実行されます。ブラウザ間の互換性の問題と、選択した要素の null 値によるエラーが返されます。

CSS Vars を使用したブラウザ間の実装

ブラウザの互換性は、懸念がある場合、その答えは CSS 変数 (CSS Vars) を使用した解決策を提案しています。 CSS Vars を使用すると、JavaScript を通じて CSS プロパティを動的に変更できます。

スクロールバーの背景の CSS 変数を定義し、それを擬似要素ルールで使用することで、次を使用してスクロールバーの色を変更できます。 JavaScript:

CSS:

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

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

JavaScript:

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

このアプローチにより、ブラウザの制限に関係なく、スクロールバーの色を指定します。

以上がJavaScript でスクロールバーなどの CSS 疑似要素を動的にカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。