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

    原文作者:邵静静
    原文地址: https://segmentfault.com/a/1190000010544301
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞