addRule和insertRule的封装，看完就懂！

记录一下js调用样式的方法addRule和insertRule

在js文件中要包括以下内容：创建DOM，创建CSS和实际开发内容；这样一个JS就把html、css和行为内容都囊括了，不需要引css，只引入这个js就能全部执行完。

使用这种方法还能防止css拷贝，下图可以看到单独引入的css文件是可以直接拷贝的

但是div1和div2的样式通过addRule和insertRule方法添加不会显示在css文件，也不会显示在HTML页面中；

• 下面了解一下document.styleSheets

console.log(document.styleSheets)//获取页面所有的style标签  StyleSheetList{0:CSSStyleSheet,1:CSSStyleSheet,length:2}
console.log(document.styleSheets[0])//第一个style标签 CSSStyleSheet{...}
console.log(document.styleSheets[0].cssRules)//~的所有选择器css列表；CSSRuleList{0:CSSStyleRule,1:CSSStyleRule,length:2}
console.log(document.styleSheets[0].cssRules[0])//CSSStyleRule {selectorText: ".box"...box
console.log(document.styleSheets[0].cssRules[0].cssText)//就是".box { width: 100px; height: 100px; background-color: red; }"
console.log(document.styleSheets[0].cssRules[0].selectorText)// .box 
console.log(document.styleSheets[0].cssRules[0].style)//就是CSSStyleDeclaration
console.log(document.styleSheets[0].cssRules[0].style.width)//100px
document.styleSheets[0].cssRules[0].style.width = '10px' ;//样式会作用上去

• addRule和insertRule的用法

  //两者都可以添加css样式到styleSheets样式表中，不是加载style中；
  document.styleSheets[0].insertRule(".div{width:100px;height:100px;background-color:blue",document.styleSheets[0].cssRules.length) 
  //styleSheet.insertRule("选择器{样式内容}",插入在第几个选择器索引)
  
  document.styleSheets[0].addRule(".div","width:100px;border:1px solid red",document.styleSheets[0].cssRules.length) 
  //styleSheet.insertRule("选择器","css样式",插入在第几个选择器索引)
  //早期浏览器不支持

• 想要通过这么简单的方式使用~

  addCss('.div1',{
    width:'80px',
    height:80,
    backgroundColor:'yellowgreen',
    borderRadius:'50%'
  })
  addCss('.div2',{
    width:'80px',
    height:80,
    backgroundColor:'pink',
    borderRadius:'50%'
  })

那就封装它

// 封装插入样式的函数
  function addCss(selector,style,title){
    //如果不传title，就自己随便给了个名字
    if(title === undefined) {
      title = 'sheet'
    }
    // 首先要找到title为给定的title的样式表

    // 获取页面中的style样式表，并转成数组
    var styleSheets = Array.from(document.styleSheets)
    // 找到对应的样式表
    var styleSheet = styleSheets.reduce(function(value,item){
      if(item.title === title){
        // 如果找到title属性为给定的title的样式表，那么就返回
        return item
      }else{
        // 找不到就返回null
        return value
      }
    },null)
    // 如果没找到 就需要新建一个了
    if(!styleSheet){
      // 创建style标签
      var sty = document.createElement('style')
      // 添加title属性
      sty.title = title
      document.head.appendChild(sty)
      // 获取到新添加的这个样式表，要往里添加样式的
      styleSheet = document.styleSheets[document.styleSheets.length - 1]
    }
    // 接下来思考怎么添加样式；就两个方法，addRule和insertRule;先确定两者的用法
    //然后把传参进来的style样式转换成两者需要的格式；
    var str = ""
    for(var prop in style){
      // 这里是把大写字母变成 -小写字母 backgroundColor ==> background-color
      str += prop.replace(/[A-Z]/g,function(value){
        return '-' + value.toLowerCase()
        //传参里面可以是数字，所以这里判断是数字的话要把px加上；
      }) + ":" + (typeof style[prop] === 'number' ? style[prop] + 'px' : style[prop]) + ";"
    }

    // 样式添加
    if(styleSheet.addRule){
      styleSheet.addRule(selector,str,styleSheet.cssRules.length)
    }else{
      styleSheet.insertRule(selector + '{' + str + '}',styleSheet.cssRules.length)
    }
  }