js 获取/修改伪类 样式

文章目录

      • 获取伪类样式
      • 修改伪类样式
        • 不能直接修改
        • 通过类间接修改
        • 通过css变量间接修改

获取伪类样式

window.getComputedStyle(ele,'after')[prop]

修改伪类样式

不能直接修改

通过类间接修改

通过切换不同的类来实现切好 伪类

.div{
     
	width: 50px;
	height: 20px;
}

.sf1::after{
     
	content:'伪类1样式'
}
.sf2::after{
     
	content:'伪类2样式'
}

然后通过js切换类来实现

通过css变量间接修改

<div class="my" data-color="red" data-text="伪类文本">div>
.my::after{
     
	content: attr(data-text);  // 只能修改content
	color: attr(data-color); // 修改无效
}

然后通过js修改元素属性来实现修改伪类样式

document.querySelector('.my').dataset.text = 'ggg'

你可能感兴趣的:(css/css3,JavaScript)