JavaScript 可以動態修改 CSS 偽元素樣式嗎？

用 JavaScript 修改 CSS 偽元素樣式：仔細看看

是否可以透過以下方式動態更改 CSSScript 偽元素的樣式JavaScript？假設我們希望設定捲軸的顏色並將其完全隱藏。但是，使用以下腳本會傳回「無法讀取null 的屬性'樣式'」錯誤：

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

讓我們探索一種在Webkit 瀏覽器中有效運作並允許在其他瀏覽器中優雅降級的替代方法。

利用CSS 變數進行樣式設定

現代瀏覽器提供CSS 變數(CSS Vars)，它提供了一種從JavaScript 定義和操作自訂CSS 屬性的強大方法。透過使用 CSS Var，您可以在保持跨瀏覽器相容性的同時實現所需的樣式效果。

在CSS 中，定義CSS Var --scrollbar-background 並將其應用到捲軸的拇指：

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

#editor::-webkit-scrollbar-thumb:vertical {
  background-color: #ccc;
  background-color: var(--scrollbar-background);
}

現在，在JavaScript 中，修改#editor 上的-- scrollbar-background 屬性元素：

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

透過將CSS 變數與JavaScript結合使用，您可以輕鬆更改偽元素樣式並確保在各種 Web 瀏覽器中的相容性。

以上是JavaScript 可以動態修改 CSS 偽元素樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！