如何使用 JavaScript 動態變更 CSS 偽元素樣式？

透過JavaScript 動態操作CSS 偽元素樣式

在嘗試透過JavaScript 動態變更CSS 偽元素樣式時，使用者可能會遇到「未捕獲類型錯誤：無法讀取null 的屬性'樣式'”錯誤。本文專門探討了一種利用 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);
}

然後，將變數套用背景顏色：

然後，將變數應用於捲軸偽元素：

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

JavaScript操作

在JavaScript 中，在#editor 元素上設定CSS 變數：This方法允許動態操作捲軸背景顏色，即使在不支援現代CSS 功能的舊版瀏覽器中也是如此。

以上是如何使用 JavaScript 動態變更 CSS 偽元素樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！