页面和元素的常用易混淆宽高与距离

页面和元素的常用易混淆宽高与距离

页面和元素有一些常用的宽高还有各种距离，比较容易混淆

1.页面的几种不同的宽高和距离

方法	描述
clientWidth / clientHeight	获取浏览器的可视宽高 ，不包含滚动部分
scrollWidth / scrollHeight	获取页面的实际宽高 ，包含滚动部分
scrollTop / scrollLeft	获取或设置根元素的内容垂直（水平）滚动距离

2.元素宽高和相对距离

方法	描述
width / height	元素样式宽高
clientWidth / clientHeight	元素内容宽高，包含：padding+width/height
offsetWidth / offsetHeight	元素实际宽高，包含：border+padding+width/height

获取元素与最近的定位父级的距离（如果没有定位父级元素则是到body的距离）

方法	描述
offsetTop	当前元素 上边框 外边缘 到 最近的已定位父级 上边框 内边缘
offsetLeft	当前元素 左边框 外边缘 到 最近的已定位父级 左边框 内边缘

3.事件触发位置

方法	描述
clientX / clientY	鼠标相对于 浏览器窗口可视区域 的x，y坐标，可视区域不包括工具栏
pageX / pageY	鼠标相对于 文档 的x，y坐标
offsetX / offsetY	鼠标相对于 事件源 的x，y坐标