如何使用 JavaScript 動態操作 CSS 偽元素？

使用JavaScript 操作CSS 偽元素

使用JavaScript 動態改變CSS 偽元素樣式可以透過採用各種技術來實現，包括CSS

CSS 變數

對於webkit 瀏覽器，用於操作偽元素的簡單且跨瀏覽器相容的解決方案是 CSS 變數。這些變數可讓您在 CSS 中定義樣式並在 JavaScript 中存取和變更它們。應用此方法：

• 在樣式表中定義一個CSS變量，如：

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

• 在偽元素樣式中引用這個使用var(- -scrollbar-background) 的變項。例如：

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

• 要動態變更偽元素的樣式，請在 JavaScript 中修改 CSS變數的值：

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

特定於供應商的屬性

要直接定位特定於供應商的偽元素（例如WebKit 捲軸） ，您可以在JavaScript 中使用對應的供應商前綴。例如，以下程式碼設定捲軸滑桿的背景顏色：

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

要隱藏捲軸，請使用供應商特定的屬性-webkit-overflow-scrolling:

document.querySelector("#editor::-webkit-scrollbar").style.webkitOverflowScrolling = "hidden";

注意：瀏覽器對這些供應商特定屬性的支援可能會有所不同。建議在生產程式碼中使用這些技術之前檢查相容性矩陣。

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