一. Windows 相关
网页正文部分上: Windows.screenTop
网页正文部分左: Windows.screenLeft
屏幕分辨率的高: Windows.screen.height
屏幕分辨率的宽: Windows.screen.width
屏幕可用工作区高度: Windows.screen.availHeight
屏幕可用工作区宽度: Windows.screen.availWidth
二. body 相关
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
专门建立的学习 Q-q-u-n: 731771211, 分享学习方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
三. 滚动相关
scrollHeight: 获取对象的滚动高度.
scrollWidth: 获取对象的滚动宽度
document.documentElement.scrollTop 垂直方向滚动的值
四. 位置精确定位
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
五. 坐标轴
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
六. width/clientWidth/offsetWidth 以及 height 之间区别
width 是指可见内容的宽
height 是指可见内容的高
- clientWidth = width + padding
- clientHeight = height + padding
- offsetWidth = width + padding + border
- offsetHeight = height + padding + border
来源: http://www.jianshu.com/p/9fc8df5d82e4