关于原生js的位置操作以及尺寸操作

原生js的位置以及尺寸操作 —— offset系列

1.  demo.style.height/width 获取行内样式，如果没有写行内样式的话，则获取到的值为空。如果获取到的存在值，值为带单位的eg:100px
2.  offsetWidth/offsetHeight 用来获取对象的大小(只读属性)
构成： offsetHeight = height + padding + border

3.  offsetParent 返回该对象距离最近的带有定位的父级，如果当前元素所在的父级都没有设置，那么offsetParent指的就是 body.
4.  offsetLeft 和offsetTop 用来得到对象距离自身最近的（带有定位的）父元素的位置。
offsetLeft代表的是自身border左侧到父级padding左侧的距离。
备注： offsetLeft以border左上角为基准，style.left以margin左上角为基准。

原生js的位置以及尺寸操作 —— scroll系列

1.  scrollHeight和scrollWidth 获取对象实际内容的高度／宽

2.  scrollTop/scrollLeft  被卷去部分的顶部／左侧到可视区域 顶部／左侧的距离。
单独给某块demo设置滚动条的话，要获取就是demo.onscroll = function(){console.log(demo.scrollTop)};

原生js的位置以及尺寸操作 —— client系列

1.  clientWidth和clientHeight
可视clientWidth: width  +  padding  不包含border

2.  clientTop/clientLeft
clientTop和clientLeft没什么用
   他们就是borderTop和borderLeft（如果有滚动条会包含滚动条的宽度）

欢迎大家关注我的微信公众帐号