获取和修改伪元素样式

//获取

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);
}