layout: post title: 获取元素位置的一些方法 categories: [JavaScript] description: JavaScript keywords: JavaScript —

获取元素位置的一些方法

把所有获取元素或者window位置的方法总结一下，方便下一次查找

获取元素位置大小的方法

Element.getBoundingClientRect(): 获取元素在可视区域中位置

Window.pageYOffset 和Window.scrollY 两者的意思是一样的，获取window的滚动距离。桌面端和移动端的窗体滚动元素是不一样的，对于窗体元素是body或者html的时候，我们使用document.scrollingElement.scrollTop来获取滚动的距离。如果滚动元素不是窗体，那么滚动的距离永远是0

clientHeight:/clientWidth元素的内部高/宽度，只包括padding，其余的都不包括

Element.scrollHeight: 滚动元素的高度，只包括padding，不管元素是否被隐藏，都返回元素的实际占据的高度

HTMLElement.offsetLeft: 当前元素（width+padding-left）距离body左边的宽度=>相当于当前元素的margin-left/+border-left+祖先的padding-left+margin-left+border-left 层层相加的结果

HTMLElement.offsetHeight: width+padding+border的宽高度