JavaScript で CSS 疑似要素スタイルを変更できますか?

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

JavaScript を通じて CSS 疑似要素のスタイルを変更することは可能ですか?

これを使用してスクロールバーの色を動的に設定する例code:

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

しかし、ブラウザは次のエラーで応答します:「Uncaught TypeError: Cannot read property 'style' of null.」

このタスクは別の方法で実行できますか?

Webkit ブラウザでは、CSS を利用してこれを実現できますVars.

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

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

JavaScript でこの値を操作するには:

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

JavaScript を使用して CSS 変数を管理するその他の例については、次のリソースを参照してください: https://eager.io /blog/communicating-between-javascript-and-css-with-css-variables/

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