获取伪元素的属性和改变伪元素的属性

获取伪元素的属性值

获取伪元素的属性值可以使用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');