微客导航 » 文章资讯 » JavaScript实现修改伪类样式

JavaScript实现修改伪类样式

2023-09-20 10:15:05 423

项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式，但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。

HTML

Hi,thisisaplain-old,sad-lookingparagraphtag.

CSS

.red::before{
content:'red';
color:red;
}

方法一

使用JavaScript或者jQuery切换

元素的类名，修改样式。

.green::before{
content:'green';
color:green;
}
$('p').removeClass('red').addClass('green');

方法二

在已存在的').appendTo('head');

方法四

使用HTML5的data-属性，在属性中使用attr()动态修改。

Hi,thisisplain-old,sad-lookingparagraphtag.
.red::before{
content:attr(data-attr);
color:red;
}
$('.red').attr('data-attr','green');

以上就是我们为大家整理的四种方法，如果大家有更好的方法，可以在下方的留言区讨论。