js设置before和after伪元素效果的方法总结

我们知道，我们无法直接给before和after伪元素设置js效果
例子说明
现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀"，颜色为红色的伪元素)

　　
　　


　　
我是测试内容
　　

解决办法

【方法一】动态嵌入css样式
IE8-浏览器将

 

[缺点]此方法无法控制伪元素里面的content属性的值

 
【方法三】利用setAttribute实现自定义content内容





[注意]此方法只可用setAttribute实现，经测试用dataset方法无效

 
【方法四】添加样式表

firefox浏览器不支持addRule()方法，IE8-浏览器不支持insertRule()方法。兼容写法如下：





[缺点]该方法必须有内部

正文内容

进化版

这样写了功能实现了，优雅欠佳，作为进化版，其实就是用class名来重写样式，

p:after{content:'我是后缀'}
p.change{content:'我是修改过的后缀'} （这里是不是该改为 p.change:after{content:'我是修改过的后缀'} ）

只要在需要的时候，给p标签添加change这个class就可以实现替换的目的。原理和第一个没什么区别。这样写的好处是，改变起来更优雅灵活，用class做了个钩子。

再进化版

上个版本已经解决了切换的问题，如果有更多可以不断的切换class，但是想下这种方式也还是有点笨重，因为可能要写很多css，如果是想换的内容是不确定的，需要用变量来处理呢？这时候，可能会想到用 第一种方法就可以了，但是第一种方式真的不是很优雅。还有什么方式呢？
在css中，伪元素的content是能读取到data属性的。
也就是说我们可以这样写css

p:after {
    content: attr(data-content);
}
在进化版是第二版的变种，
css文件
p.change:after {
    content: attr(data-content);
}
js文件
$(this).addClass('change').attr('data-content', content);
这样你就可以随意改动了。
最后一种方法是由bumfod提供方法很hack了，遍历了所有的css文档，找到伪元素，然后更改，有兴趣的同学可以尝试下