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

JavaScript を使用して CSS 擬似要素スタイルを動的に操作する

JavaScript を使用して CSS 擬似要素スタイルを動的に変更しようとすると、ユーザーは次のような問題に遭遇する可能性があります。 「Uncaught TypeError: null のプロパティ 'style' を読み取れません」エラー。この記事では、CSS 変数を活用して、特に WebKit ブラウザーでブラウザー間の互換性を実現する別のアプローチについて説明します。

CSS 変数ベースのアプローチ

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

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

次に、変数をスクロールバーに適用します。疑似要素:

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

JavaScript 操作

JavaScript で、#editor 要素に CSS 変数を設定します:

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

これこのメソッドを使用すると、最新の CSS をサポートしていない古いブラウザでも、スクロールバーの背景色を動的に操作できます。特徴

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