1.offsetwidth/offsetHeight 获取文档的实际宽高 不计算滚动条 但是计算元素的占位大小
offsetWidth = padding(左、右) + width + border(左、右)
offsetHeight = padding(上、下) + height + border(上、下)
2.offsetTop/offsetLeft 获取元素到定位父级的距离(非定位置),但是不包括定位父级的border线 ;如果父级没有定位则是到body的顶部/左边的距离
3.offset家族图谱
4.innerWidth/innerHeight 获取窗口的宽度和高度 出现滚动条时也是计算在内的,窗口指的是window,所以一般时window.innerWidth/innerHeight。
5.clientWidth/clientHeight 获取文档的可视区宽高,不计算滚动条,不计算border线,文档一般指的是documet.documentElement(html).clientWidth/clientHeight,但是也可以用在一般元素上
clientWidth = padding(左、右) + width
offsetHeight = padding(上、下) + height
6.scrollWidth/scrollHeight 计算元素的滚动宽高,会计算溢出部分(内容的大小),不包括border线,但是当元素加上overflow:scroll之后,将会重新计算大小,此时会把padding计算在内。
7.scrollTop/scrollLeft 被卷去的头部和左边
8.getBoundingClientRect
width 元素的实际占位宽度
heigth 元素的实际占位高度
top 元素上边到视口顶部的距离
bottom 元素的底部到视口顶部的距离
right 元素右边到视口左边的距离
left 元素左边到视口左边的距离
x 元素x轴的距离
y 元素y轴的距离
9.scrollIntoView
参数为true 元素的顶部与页面顶部对齐
参数为false 元素底部与页面底部对齐