前端页面高度宽度汇总

通过document.documentElement获取html

通过document.body获取body

window.screen === screen

DOM对象的属性

clientHeight：页面中看到的区域的高度，包括padding，不包括滚动条高度、边线

offsetHeight：页面中看到的区域的高度，包括padding、滚动条高度、边线

scrollHeight：内容的全文高度， 包括padding，不包括滚动条高度、边线

clientTop：元素内部上边沿距离元素本身上边沿的距离，即border-top的宽度

offsetTop：元素本身上边沿距离document上边沿的距离

scrollTop：元素滚动的纵向距离

window的属性

innerHeight：浏览器窗口中可以看见的内容的高度，包括滚动条；

outerHeight：整个浏览器的高度

pageYOffset：页面纵向滚动的距离，兼容性更好

// 距离页面顶部的距离,优先使用pageYOffset
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

scrollY：同pageYOffset，但是可以赋值，让视图滚动到指定位置

screenTop（screenY）：浏览器上边沿距离屏幕顶部的距离

screen的属性

availHeight：屏幕可用区域的高度，即减去任务栏的高度

height：屏幕的高度

event事件中鼠标的位置

offsetX： 鼠标点击位置与该元素内部左边沿的距离 ，不包括border

clientX：鼠标点击位置与窗口左边沿的距离

pageX：鼠标点击位置与document左边沿的距离，包括横向滚动距离

screenX：鼠标点击位置与屏幕左边沿的距离