如何使用 JavaScript 動態設定 CSS 偽元素樣式？

使用 JavaScript 動態 CSS 偽元素樣式

使用 JavaScript 修改 CSS 偽元素樣式是否可行？例如，動態調整捲軸顏色或隱藏它。但是，嘗試使用這些腳本執行此操作會導致「類型錯誤：無法讀取null 的屬性「樣式」。」

解決方案：引入CSS 變數

解決方案：引入CSS 變數

而跨瀏覽器互通性可能不是優先考慮的問題，使用CSS 變數（CSS Vars）在WebKit 瀏覽器中提供了有效的解決方案。此方法可讓您在 CSS 中宣告變數並使用 JavaScript 動態修改它們。

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

在CSS 中，將滾動條背景顏色定義為變數：

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

然後，設定滾動條縮圖的樣式使用變數：

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

在JavaScript 中，您可以更改#editor上的變數值element:

此方法可讓您動態修改捲軸顏色，而無需直接存取偽元素的樣式，從而避免「TypeError」問題。 更多範例，請參閱有關使用JavaScript 進行CSS 變數操作的資源：https://eager.io/blog/communicating- Between-javascript-and-css-with-css-variables/

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