一,offset系列
1,offsetWidth
- 获取到当前元素的宽度(padding+border+width)
- style.width也返回这个宽度
- 区别:
- 如果没有给 HTML 元素指定过 width样式,或者样式没有写入标签内,则 style.width 返回的是空,如下图所示。
- style.width返回值除了数字外还带有单位px,而offsetWidth返回的数值类型

(根据数值计算也可以知道返回的宽度是元素的width+左右两个padding和左右两个border)
2,offsetHeight
- 获取到当前的元素的高度(height+padding+border)
- 其他同offsetWidth类似

3,offsetLeft
- 获取元素到最近的定位父盒子的左侧距离,如果没有就继续向上层寻找直到body
- 获取的距离主要是 父元素的margin+父元素的padding+父元素的border+自己的margin(元素没有脱离文档流)

- 元素脱离文档流后,就是元素自身的margin值+left,如图所示:

4,offsetTop
- 获取元素到最近的定位父盒子的上侧距离,如果没有就继续向上层寻找直到body
- 获取的距离主要是 父元素的margin+父元素的padding+父元素的border+自己的margin(元素没有脱离文档流)

- 元素脱离文档流后只跟自己的margin和top有关

5,offsetParent
- 用于获取该元素中有定位的最近父级元素
- 如果当前元素的父级元素都没有进行定位,那么offsetParent为body


二,scroll系列
1,scrollHeight
- 获取元素中内容的实际高度(没有边框,有padding),如果没有内容或者内容不足,那就获取到元素的高度


2,scrollWidth
- 同scrollHeight
- 获取元素中内容的实际宽度(没有边框,有padding),如果内容不足或者没有内容就获取元素的宽度
3,scrollTop
- 元素向上滚动出去的距离

4,scrollLeft
- 元素向左滚动出去的距离

5,兼容问题
- 未声明 DTD: 谷歌,火狐,IE9+支持:
- document.body.scrollTop/scrollLeft
- 已经声明DTD:IE8以下支持:
- document.documentElement.scrollTop/scrollLeft
- 火狐/谷歌/ie9+以上支持的:
- window.pageYOffest/pageXOffest
- 所以兼容代码:
function getScroll() {
return {
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
};
}
三、client系列

1,clientWidth
- 获取网页可视区域宽度,不包括滚动条,不包括边框;相当于width+padding;
2,clientHeight
- 获取网页可视区域的高度,不包括滚动条,不包括边框;相当于height+padding;
3,clientLeft
- 相当于左边边框的宽度(有滚动条会加上滚动条的宽度)
4, clientTop
- 相当于上边框的宽度(有滚动条会加上滚动条的宽度)
5,clientX
- 获取鼠标事件发生时,鼠标距离可视区域的水平坐标
6,clientY
- 获取鼠标事件发生时,鼠标距离可视区域的垂直坐标

网友评论