Style-components 基础版

需求： 通过这种写法实现设置样式

const box = document.getElementsByClassName("box")[0]
box.styles`
    background:${"red"}
    width:${"99px"}
    height:${3000}
`

一、在文档原型挂载styles方法

HTMLElement.prototype.styles=function(){
        let allKey = arguments[0],index=0;
        allKey.forEach(item=>{
            index++;
            const style = item.replace(/ |\n|:/g,"")
            //correct 兼容 属性值
            !!style? this.style[style]=correct(style,arguments[index]):'';
        })
        console.log(allKey);
    };

二、实现值的兼容

function correct(style,value){
        function handlePX(value){
            if(!isNaN(value)){
                value+="px";
            }
            return value;
        }
        switch (style){
            case "width":
            case "height":
                return handlePX(value);break;
            // 有其他需要兼容的 可以在此处添加
            default : return value;
        }
    }