给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小时内删除。