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

WebKit 中透過JavaScript 實現動態CSS 偽元素樣式

透過JavaScript 動態修改CSS 偽元素的挑戰樣式對於開發樣式人員來說。特別是在 webkit 瀏覽器中，嘗試操作背景和可見性等屬性通常會傳回 null 錯誤。

一種解決方法是利用 CSS 變量，它提供了一種更現代、更通用的方法。透過在 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 中，調整#editor 元素上的--scrollbar-background 變量來動態更改滾動條的外觀：

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

此方法有效解決了偽元素直接樣式操作的限制在webkit 瀏覽器中，同時也提供與不支援CSS 變數的舊版瀏覽器的無縫互通性。

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