实现js修改before边框颜色

在touch中，我们常用的1px边方案就是通过伪类+transform的scale来缩放伪类元素，达到1像素边的方案。
但是在实际的项目中，经常会存在希望通过后台配置来控制前端样式的展示，例如通过配置来实现边框颜色的修改。此时需要动态的使用js动态的修改before的style属性。
常见的方法有

1. 动态创建style标签，然后生成新类名的伪类样式来覆盖原有的样式
   伪代码如下:

    var color = '#9e9e9e'     var style = document.createElement('style');     style.children=`.xxx::before{border-color: ${color}}`     document.head[0].append(style);     document.getElement('#myid').classText = document.getElement('#myid').classText + ' xxx';

太过繁琐。
通过自己的学习和实践后，发现我们一直忽视的一个css属性inhert可以简单的解决这个问题像这样

    .a {         @include border-1px(#9e9e9e);         &::before{             border-color: inhert;         }     }

    document.getElement.style.borderColor= '#fff';

完美解决问题~

来源：博客园

作者：北京-树苗

链接：https://www.cnblogs.com/clearfix/p/11414648.html