如何使用 JavaScript 修改 CSS 偽元素樣式而不出現「Uncaught TypeError: Cannot read property 'style' of null」？

使用JavaScript 修改CSS 偽元素樣式

在嘗試使用JavaScript 調整捲軸的顏色和可見性時，經常會遇到錯誤「未捕獲類型錯誤：無法讀取null 的屬性'樣式'」。出現這種情況是因為網站預設禁用滾動，導致滾動條元素不存在。

要解決此限制，您可以採用 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"));

這種方法允許動態修改捲軸樣式，而不會遇到「空」錯誤。請記住，並非所有瀏覽器都支援此技術，因此請考慮對舊版瀏覽器進行優雅降級。

以上是如何使用 JavaScript 修改 CSS 偽元素樣式而不出現「Uncaught TypeError: Cannot read property 'style' of null」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！