给before和after伪元素设置js效果的⽅法
层叠样式表(CSS)的主要⽬的是给HTML元素添加样式,然⽽,在⼀些案例中给⽂档添加额外的元素是多余的或是不可能的。事实上CSS中有⼀个特性允许我们添加额外元素⽽不扰乱⽂档本⾝,这就是“伪元素”。
前⾯的话
⽆法直接给before和after伪元素设置js效果
例⼦说明
现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜⾊为红⾊的伪类)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">我是测试内容</div> <script> var oBox = ElementById('box'); </script>
</body>js获取子元素
</html>
解决办法
【⽅法⼀】动态嵌⼊CSS样式
IE8-浏览器将<style>标签当作特殊的节点,不允许访问其⼦节点。IE10-浏览器⽀持使⽤styleSheet.cssText属性来设置样式。兼容写法如下:
<script>
function loadStyleString(css){
var style = ateElement("style");
try{
style.ateTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = ElementsByTagName('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 = ateElement("style");
try{
style.ateTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = ElementsByTagName('head')[0];
head.appendChild(style);
}
loadStyleString('');
ElementsByTagName('style')[1].innerHTML = "#oBox:before{color: " + colorValue + ";}";
</script>
[注意]只能使⽤getElementsByTagName('style')[1]的⽅法,经测验使⽤stylesheets[1]⽅法⽆效
DEMO
<;演⽰框>点击下列相应属性值可进⾏演⽰
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论