如何用js改变伪元素样式

通常设置伪元素的样式直接用CSS很方便

.test:after{
    content:'';
    display:block;
    width:100%;
    height:100%;
    background:red;
}

可是有时候想用js动态的去改变伪元素的样式，但是js获取不到伪元素，这就很头疼，不过我们可以换个思路来解决这个问题:

方法一：直接给元素追加一个<style>标签

$('.test').append('<style>.test:after{display:none}</style>')

但是这种方法比较麻烦，不太推荐，所以还是尽量不要用js去改变伪元素样式，变通一下，将伪元素改为其他标签，再通过js去动态的控制

方法二：直接改变类名

.change:after{
    content:'';
    display:none;
}

$('.test').addClass('change').removeClass('test')

• 这种方法要注意如果把test类名去掉，但是该元素还需要test的一些其他样式，那么在change类名中要增加这些样式
• 或者不去掉test类名，直接利用优先级把test的某些样式覆盖掉
• 还有一点要注意：伪元素一定要加上content:'';否则所写的其他样式不起作用

我的个人博客,有空来坐坐