JavaScript实现修改伪类样式
项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。
HTML
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');
以上就是我们为大家整理的四种方法,如果大家有更好的方法,可以在下方的留言区讨论。