「Uncaught TypeError: Cannot read property 'style' of null」を発生させずに JavaScript で CSS 疑似要素スタイルを変更する方法

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

JavaScript を使用してスクロールバーの色と可視性を調整しようとすると、よく次のような問題が発生します。エラー「Uncaught TypeError: null のプロパティ 'style' を読み取れません」。これは、Web サイトがデフォルトでスクロールを無効にしており、スクロールバー要素が存在しないために発生します。

この制限を回避するには、CSS Vars テクニックを使用できます。この方法では、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 で、スクロールバーの背景色を制御する変数を変更します。

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

このアプローチにより、動的変更が可能になります。 「null」エラーが発生することなくスクロールバー スタイルを変更できます。この手法はすべてのブラウザーでサポートされているわけではないことに注意してください。そのため、古いブラウザーでは正常な機能低下を検討してください。

以上が「Uncaught TypeError: Cannot read property 'style' of null」を発生させずに JavaScript で CSS 疑似要素スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。