JavaScript 如何動態自訂捲軸等 CSS 偽元素？

使用 JavaScript 動態自訂 CSS 偽元素

許多開發人員遇到使用 JavaScript 動態變更 CSS 偽元素樣式的挑戰。本問題探討了透過 JavaScript 腳本修改捲軸等元素的外觀和行為的可能性。

更改滾動條顏色和可見性

該問題演示了兩個嘗試的腳本修改滾動條的顏色和可見性：

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

但是，這些腳本遇到了問題跨瀏覽器相容性並由於所選元素的空值而傳回錯誤。

使用 CSS 變數實作跨瀏覽器

雖然瀏覽器相容性可能是一個問題，但答案提出了使用 CSS 變數（CSS Vars）的解決方案。 CSS Vars 允許透過 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);
}

Java:

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

此方法可以動態修改捲軸顏色不受瀏覽器限制的影響。

以上是JavaScript 如何動態自訂捲軸等 CSS 偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！