给before和after伪元素设置js效果的5种方法
前面的话
无法直接给before和after伪元素设置js效果
例子说明
现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪元素)
Documentvar oBox = document.getElementById('box');
解决办法
【方法一】动态嵌入CSS样式
IE8-浏览器将
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;}");
【方法二】添加自带伪元素的类名
oBox.className= 'change';
[缺点]此方法无法控制伪元素里面的content属性的值
【方法三】利用setAttribute实现自定义content内容
oBox.setAttribute('data-beforeData','前缀');
[注意]此方法只可用setAttribute实现,经测试用dataset方法无效
【方法四】添加样式表
firefox浏览器不支持addRule()方法,IE8-浏览器不支持insertRule()方法。兼容写法如下:
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)
[缺点]该方法必须有内部
【方法五】修改样式表
先使用方法四添加空的样式表,然后获取新生成的
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 + ";}";
[注意]只能使用getElementsByTagName('style')[1]的方法,经测验使用stylesheets[1]方法无效
DEMO
<演示框>点击下列相应属性值可进行演示