element.style和window.getComputedStyle的区别

element.style

　　- 支持读和写，获取的是元素style属性上的样式(行内样式)

window.getComputedStyle

　　- 只支持读，获取的是渲染后最终的样式

　　- IE8以下不支持window.getComputedStyle，使用currentStyle　　

　　- window.getComputedStyle() 有两个参数，元素和伪类。当不查询伪类元素的时候第二个参数可以不填，或者传入 null。

     <div id="box">
         div
     </div>

    <script>

        let div = document.getElementById("box")

        div.style.setProperty("color", "#bfa")  //添加样式
        div.style.width = "100px"              //添加样式

        console.log(div.style.width);           //获取样式值  100px
        console.log(getComputedStyle(div).width)//获取样式值  100px
        
        div.setAttribute("data-ts", "你好")      //设置属性
        console.log(div.getAttribute("data-ts"));  //获取属性值

    </script>