原生js获取元素的各种位置

获取元素位置

• offsetLeft(距离定位父级左边的距离)
• offsetTop(距离定位父级上边的距离)

如当前元素设置position值不为static时，父级的父级也设置了position值不为static，父级的position值为static，计算的是当前元素到父级的父级元素的各距离

• offsetWidth（当前元素可视宽度）
• offsetHeight（当前元素可视高度）
• clientLeft（当前元素左边框宽度——border-left-width）
• clientTop（当前元素上边框宽度——border-top-width）
• clientWidth（当前元素可视区域宽度width + padding）
• clientHeight（当前元素可视区域高度height + padding）
• scrollTop（纵向滚动条滚动的距离）
• scrollLeft（横向滚动条滚动的距离）
• scrollWidth（内容宽度）
• scrollHeight（内容高度）

clientHeight和scrollHeight在没有滚动条的时候计算的高度是一样的，如果有滚动条scrollHeight和clientHeight就不会相等了，如果滚动条滚到底那么scrollHeight等于clientHeight加上scrollTop

getBoundingClientRect()方法的返回值

• left（当前元素左侧相对于可视区左上角的距离）
• right（当前元素右侧相对于可视区左上角的距离）
• top（当前元素上边相对于可视区左上角的距离）
• bottom（当前元素下边相对于可视区左上角的距离）
• width（可视宽度width + padding）
• height（可视高度height + padding）

获取可视区宽高

• window.innerWidth
• window.innerHeight
• document.documentElement.clientWidth
• document.documentElement.clientHeight

如果有滚动条window.innerHeight等于document.documentElement.clientHeight的高度加上滚动条的滚动高度，如果没有滚动条，两个值一样，值是除去上面的操作等区域，只是当前页面内容展示区域

滚动条的高度等于offsetHeight（当前可视区域的高度）/scrollHeight（内容区域的高度）* offsetHeight（当前可视区域的高度）

屏幕宽高

• window.screen.width
• window.screen.height

源文地址:www.cnblogs.com/Ivy-s/p/740…