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

使用 JavaScript 操作 CSS 偽元素樣式

純粹透過 JavaScript 可以更改 CSS 偽元素的樣式，例如滾動條具有挑戰性的。雖然直接存取偽元素的 style 屬性之類的方法可能無法按預期工作，但您可以考慮其他方法。

一個有效的解決方案是利用 CSS 變量，它提供了一種無縫的方式來修改偽元素-來自 JavaScript 的元素樣式。透過在 CSS 程式碼中引入 CSS 變量，您可以定義一個後備值，然後在 JavaScript 程式碼中動態更新它。

例如，要更改捲軸的顏色，您可以定義以下CSS：

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

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

在JavaScript 中，您可以使用setProperty() 方法操作CSS 變數：

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

此方法提供支援大多數現代瀏覽器，包括Chrome、Firefox 和Safari。它允許您動態更新偽元素樣式，使您能夠實現自訂捲軸自訂和其他所需的效果。

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