如何使用 JavaScript 獲取與控制 CSS 偽元素（pseudo-element）
更新日期： 2024 年 11 月 11 日
在網頁開發中，CSS 偽元素（pseudo-elements）如 ::before 和 ::after ，常用於在元素內容的前後插入裝飾性內容。
然而，這些偽元素並不存在於 DOM 結構中，因此無法直接透過 JavaScript 的 querySelector 等方法選取或操作。
為了解決這個限制，我們可以結合 CSS 變數（custom properties）與 JavaScript，間接地控制偽元素的樣式。
步驟如下：
- 在 CSS 中定義變數並應用於偽元素： 首先，在偽元素的樣式中使用
var()函數引用 CSS 變數，並設定預設值。
div::after {
/* 如果 --somewidth 未定義，則使用 50px 作為預設值 */
width: var(--somewidth, 50px);
}- 在 JavaScript 中設定或更新 CSS 變數的值： 使用 JavaScript 的
setProperty方法，為特定元素設定或更新 CSS 變數的值。
// 選取目標元素，這裡以第一個 <div> 元素為例
const element = document.getElementsByTagName("div")[0];
// 設定 CSS 變數 --somewidth 的值為 50%
element.style.setProperty("--somewidth", "50%");透過上述方法，您可以動態地改變偽元素的樣式，而無需直接操作偽元素本身。
這種技術特別適合用於需要根據用戶交互或其他動態條件改變偽元素樣式的情境。
此方法的優點在於：
- 靈活性高： 可以根據不同的需求，動態調整偽元素的樣式屬性。
- 保持結構清晰： 無需在 DOM 中添加額外的元素，保持 HTML 結構的簡潔。
需要注意的是，CSS 變數在 IE 瀏覽器中不受支援，因此在考慮跨瀏覽器相容性時，需採取相應的替代方案或降級處理。
透過結合 CSS 變數與 JavaScript，開發者可以更有效地控制偽元素的樣式，提升網頁的動態效果與用戶體驗。
