css脚本化 使用styleSheets插入css样式

var obj={
            width:"50px",
            height:"50px",
            backgroundColor:"red",
            border:"1px solid #000000"
        }

        insertCss("div",obj);
        insertCss("div:hover",{
            width:"100px",
            height:"100px",
            borderTop:"1px solid #000000",
            borderBottom:"1px solid #000000",
            fontSize:"25px"
        });

        console.log(document.styleSheets);

        function insertCss(select,styles){
            if(document.styleSheets.length===0){//如果没有style标签,则创建一个style标签
                var style=document.createElement("style");
                document.head.appendChild(style);
            }
            var styleSheet=document.styleSheets[document.styleSheets.length-1];//如果有style 标签.则插入到最后一个style标签中
            var str=select+" {";//插入的内容必须是字符串,所以得把obj转化为字符串
            for(var prop in styles){
                str+=prop.replace(/([A-Z])/g,function(item){//使用正则把大写字母替换成 '-小写字母'
                    return "-"+item.toLowerCase();
                })+":"+styles[prop]+";"
            }
            str+="}";
            styleSheet.insertRule(str,styleSheet.cssRules.length);//插入样式到最后一个style标签中的最后面
        }