获取和修改伪元素样式

2017-09-12 19:32:56来源:CSDN作者:fighting_sunnyGirl人点击

分享

//获取

var shockwave = document.getElementsByClassName('shockwave')[0];


修改伪元素样式方法一

shockwave.classList.add('test');//给伪类添加样式

.test::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    animation: shockwave 1s .65s ease-out infinite;

}

上面是css里面写好的样式

修改伪元素样式方法二

document.styleSheets[0].insertRule('.test::before{color:green}',0)//chrome,firefox等非IE浏览器使用
document.styleSheets[0].addRule('.test::before{color:green}',0)//IE系列浏览器使用

/* 虽然部分浏览器也可以通过id来指定,'document.styleSheets.id.insertRule()'这种写法在chrome和IE下都行得通,但是firefox会返回'undefined',所以建议还是使用index值来获取stylesheet */

//注意:

1. `document.styleSheets`虽然按照`style`和`link`的顺序返回对应的`StyleSheetList`,然而第一个如果是`link`而不是`style`,前面讲过此时无法获取对应的`cssRules`,则`document.styleSheets[0].cssRules`为`null`,`insertRule`方法不起作用。(此情况只针对非IE浏览器,IE浏览器正常,但是定义的早往往意味着被后面的样式覆盖,所以意义不大)
2. 同上,如果页面内没有内嵌样式的`style`标签,则`insertRule`方法也无法发挥作用。

3. `index`值不够大的话很有可能会早于css文件开始的定义位置,导致被覆盖


//判断有没有内嵌style

var sheet;
if(stylesheets){
    sheet=stylesheets[stylesheets.length-1];
  // console.log(sheet);
  // console.log('sheet.cssRulesLength='+sheet.cssRules.length);
}else{
    var style=document.createElement('style');
    document.head.appendChild(style);
}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台