獲取僞元素的屬性和改變僞元素的屬性

獲取僞元素的屬性值

獲取僞元素的屬性值能夠使用window.getComputedStyle()方法，獲取僞元素的CSS樣式聲明對象。而後利用getPropertyValue方法或直接使用鍵值訪問均可以獲取對應的屬性值。

語法：window.getComputedStyle(element, [pseudoElement])

• 參數以下：
• element（Object）：僞元素的所在的DOM元素；
• pseudoElement（String）：僞元素類型。可選值有：」:after」、」:before」、」:first-line」、」:first-letter」、」:selection」、」:backdrop」；

js語法實例：

var mydiv=document.querySelector('#mydiv');

var fontSize=window.getComputedStyle(mydiv,'::before').getPropertyValue('font-size');//獲取before僞元素的字號大小

 

更改僞元素的樣式

經過更換class來實現僞元素屬性值的更改：

舉個栗子：

// CSS代碼

.red::before {

    content: "red";

    color: red;

}

.green::before {

    content: "green";

    color: green;

}

// HTML代碼

<div class="red">內容內容內容內容</div>

// jQuery代碼

$(".red").removeClass('red').addClass('green');