我们知道，我们无法直接给before和after伪元素设置js效果
例子说明
现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀"，颜色为红色的伪元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">我是测试内容</div>
<script>
var oBox = document.getElementById('box');
</script>
</body>
</html>
解决办法
【方法一】动态嵌入css样式
IE8-浏览器将<style>标签当作特殊的节点，不允许访问其子节点。IE10-浏览器支持使用styleSheet.cssText属性来设置样式。兼容写法如下:
< script >
function loadStyleString(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch(ex) {
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadStyleString("#box:before{content:'前缀';color: red;}");
< script >
【方法二】添加自带伪元素的类名
<style>
.change:before{content: "前缀";color: red;}
</style>
<script>
oBox.className = 'change';
</script>
[缺点]此方法无法控制伪元素里面的content属性的值
【方法三】利用setAttribute实现自定义content内容
<style>
.change:before{content: attr(data-beforeData);color: red;}
</style>
<script>
oBox.setAttribute('data-beforeData','前缀');
</script>
[注意]此方法只可用setAttribute实现，经测试用dataset方法无效
【方法四】添加样式表
firefox浏览器不支持addRule()方法，IE8-浏览器不支持insertRule()方法。兼容写法如下：
<script>
function insertRule(sheet,ruleKey,ruleValue,index){
return sheet.insertRule ? sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);
}
insertRule(document.styleSheets[0],'#box:before','content:"前缀";color: red;',0)
</script>
[缺点]该方法必须有内部<style>或用<link>链接外部样式，否则若不存在样式表，则document.styleSheets为空列表，则报错
【方法五】修改样式表
先使用方法四添加空的样式表，然后获取新生成的<style>并使用其innerHTML属性来修改样式表
<script>
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadStyleString('');
document.head.getElementsByTagName('style')[1].innerHTML = "#oBox:before{color: " + colorValue + ";}";
</script>
[注意]只能使用getElementsByTagName('style')[1]的方法，经测验使用stylesheets[1]方法无效
js如何控制css伪元素（before，after）
曾经遇到的问题，在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出。有个疑问如何用js控制它。于是在segmentfault提问，如下是对问题的整理：
如何用js控制css伪类after
简单粗暴的方式：
简单粗暴的方式，直接在html中添加样式覆盖掉之前样式规则
<style>
p:after{content:'我是后缀'}
</style>
<p>正文内容</p>
<script>
var css=function(t,s){
s=document.createElement('style');
s.innerText=t;
document.body.appendChild(s);
};
document.οnclick=function(){
css('p:after{content:\'修改一下\'}');
};
</script>
进化版
这样写了功能实现了，优雅欠佳，作为进化版，其实就是用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文档，找到伪元素，然后更改，有兴趣的同学可以尝试下
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
