窗口、元素、鼠标位置的api

总结一下常用的一些位置api（针对chorme和webkit）

window && document

pc端

• innerWidth 页面窗口的宽度
• innerHeight 页面窗口的高度
• outerWidth 浏览器的宽度
• outerHeight 浏览器的高度
• window.screenTop浏览器距离屏幕上边的距离
• window.screenLeft浏览器距离屏幕左边的距离
• window.screen.height显示器的高度
• window.screen.width显示器的宽度
• window.screen.availHeight显示器减去固定占据的一些空间（工具栏）的高度
• window.screen.availWidth显示器减去固定占据的一些空间（工具栏）的宽度
• document.documentElement.clientwidth 页面窗口的宽度-边框
• document.documentElement.clientHeight 页面窗口的高度-边框
• document.body.clientwidth 页面窗口的宽度-边框
• document.body.clientHeight 页面窗口的高度-边框

移动端

IMG_4379.jpg

• innerWidth 窗口的宽度(375)
• innerHeight 窗口的宽度
• outerWidth 0
• outerHeight 0
• document.documentElement.clientwidth 布局窗口的宽度(1000)
• document.documentElement.clientHeight 布局窗口的高度
• document.body.clientwidth 布局窗口的宽度(1000)
• document.body.clientHeight 布局窗口的高度

元素

滑动条直接占据元素的content+padding的空间，只有clientWidth和clientHeight需要考虑滑动条占据的空间

image.png

• clientWidth 元素padding+content-滑动条之后的宽度

• clientHeight 元素padding+content-滑动条之后的高度

• clientTop 元素border-top的高度

• clientLeft 元素border-left的宽度

• offsetWidth 元素padding+content+border的宽度

• offsetHeight 元素padding+content+border的高度

• offsetTop 父元素的margin到元素的border的距离（高度方面）

• offsetLeft 父元素的margin到元素的border的距离（宽度方面 ）

• scrollWidth 元素实际内容区域（content+padding）的宽度

• scrollHeight 元素实际内容区域（content+padding）的高度

• scrollTop 内容超出其宽高的时候，元素被卷起的高度

• scrollLeft 内容超出其宽高的时候，元素被卷起的宽度

鼠标

鼠标的坐标

• screenX 显示器左上角
• screenY 显示器左上角
• clientX 浏览器窗口左上角
• clientY 浏览器窗口左上角
• offsetX 源元素（srcElement）的左上角
• offsetY 源元素（srcElement）的左上角
• pageX 文档的左上角
• pageY 文档的左上角

引用

https://segmentfault.com/a/1190000010385665#articleHeader3j