js修改伪类before边框颜色

Posted 2022-08-29 clearfix

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

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

    var color = '#9e9e9e'
    var style = document.createElement('style');
    style.children=`.xxx::beforeborder-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';

完美解决问题~