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

獲取偽元素的屬性值

獲取偽元素的屬性值可以使用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');