JavaScript で CSS 擬似要素を動的にスタイル設定する方法

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

JavaScript を使用して CSS 疑似要素のスタイルを変更することは可能ですか?たとえば、スクロールバーの色を動的に調整したり、非表示にしたりします。ただし、これらのスクリプトでこれを行おうとすると、「TypeError: Cannot read property 'style' of null.」というエラーが発生します。

解決策: CSS 変数の導入

ブラウザ間の相互運用性は優先事項ではない場合があります。CSS 変数 (CSS Vars) を使用すると、WebKit ブラウザで効果的なソリューションが得られます。このメソッドを使用すると、CSS で変数を宣言し、JavaScript を使用して変数を動的に変更できます。

CSS で、スクロールバーの背景色を変数として定義します。

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

次に、スクロールバーのサムのスタイルを設定します。変数を使用します:

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

JavaScript では、#editor 要素の変数値を変更できます:

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

このアプローチにより、スクロールバーの色を直接アクセスせずに動的に変更できます。これにより、疑似要素のスタイルが変更され、「TypeError」問題が回避されます。

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

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