三大系列：offset，scroll，client

一，offset系列

1,offsetWidth

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

image

(根据数值计算也可以知道返回的宽度是元素的width+左右两个padding和左右两个border)

2，offsetHeight

• 获取到当前的元素的高度（height+padding+border）
• 其他同offsetWidth类似

image

3,offsetLeft

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

image

• 元素脱离文档流后，就是元素自身的margin值+left，如图所示：

image

4，offsetTop

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

image

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

image

5,offsetParent

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

image image

二，scroll系列

1,scrollHeight

• 获取元素中内容的实际高度(没有边框，有padding),如果没有内容或者内容不足，那就获取到元素的高度

image image

2，scrollWidth

• 同scrollHeight
• 获取元素中内容的实际宽度(没有边框,有padding)，如果内容不足或者没有内容就获取元素的宽度

3，scrollTop

• 元素向上滚动出去的距离

image

4，scrollLeft

• 元素向左滚动出去的距离

image

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系列

image

1，clientWidth

• 获取网页可视区域宽度，不包括滚动条，不包括边框；相当于width+padding；

2，clientHeight

• 获取网页可视区域的高度，不包括滚动条，不包括边框；相当于height+padding；

3，clientLeft

• 相当于左边边框的宽度（有滚动条会加上滚动条的宽度）

4, clientTop

• 相当于上边框的宽度（有滚动条会加上滚动条的宽度）

5，clientX

• 获取鼠标事件发生时,鼠标距离可视区域的水平坐标

6，clientY

• 获取鼠标事件发生时，鼠标距离可视区域的垂直坐标

image