js 对于样式的操作

原生js中提供了不少对于样式的操作，很多时候一直容易弄混乱，索性总结下

一：行间样式的操作

Element.style
获取的是行间的样式，可读可写

二：计算后样式操作

1.getComputedStyle()

只读属性，获取所有浏览器渲染后的样式

 let style = window.getComputedStyle(element, [pseudoElt]);
 getComputedStyle(div).marginRight

兼容：IE9- 使用 currentStyle兼容

2.getBoundingClientRect()

获取相对于可视区的top leift bottom right 以及盒子的宽和高

3.clientWidth /clientHeight

盒子宽高+padding

4.offsetWidth/offsetHeigth

盒子宽高+padding+boder