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