一、直接获取元素样式属性值 – element.style.width

console.log(div.style.width); // 500px
console.log(parseInt(div.style.width)); // 500
console.log(typeof (div.style.width)); // string

二、Offset 偏移量

offsetWidth = width + padding + border
offsetHeight = height + padding + border

console.log(div.offsetWidth); // 560 (500 + 20 + 20 + 10 + 10)
console.log(typeof (div.offsetWidth)); // number

offsetLeft : 当前元素相对于其定位父元素的水平偏移量
offsetTop : 当前元素相对于其定位父元素的垂直偏移量

在父盒子有定位的情况下，offsetLeft == parseInt(style.left)。注意：后者只识别行内样式！！！

三、offsetParent ：获取当前元素的定位父元素

如果当前元素的父元素，有CSS定位那么 offsetParent 获取的是最近的那个父元素

如果当前元素的父元素，没有CSS定位，那么 offsetParent 获取的是 body。

注意：fixed 的父级是窗口，返回值是 null

四、offsetLeft 和 style.left 区别

offsetLeft 可以返回无定位父元素的偏移量。如果父元素中没有定位，则以 body 为准。

style.left 只能获取行内样式，如果父元素中都没有设置定位，则返回空字符串。

offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位px

div.offsetLeft = 100;
div.style.left = '100px';

offsetLeft 和 offsetTop 只读，而 style.left 和 style.top 可读可写

总结：一般用 offsetLeft 和 offsetTop 获取值，用 style.left 和 style.top 赋值

• style.left: 只能获取行内样式，获取的值可能为空，容易出现 NaN
• offsetLeft: 获取值特别方便，而且是现成的 number ,计算比较方便。它只是读的，不能赋值。

三、Client

clientWidth : 获取元素的可见宽度（width + padding）
clientHeight : 获取元素的可见高度（height + padding）

注意：

clientWidth 和 clientHeight 属性是只读的，不可修改
clientWidth 和 clientHeight 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。

console.log(div.clientWidth); // 540 (500 + 20 + 20)
console.log(typeof (div.clientWidth)); // number

但是加了滚动条就不一样了，PC 端浏览器滚动条的默认大小为 17px

console.log(div.clientWidth); // 523 (540 - 17)

clientLeft 和 clientTop

实际上就是盒子上的 border 宽度

console.log(typeof (div.clientLeft) + ':' + div.clientLeft); // number : 10

event 的 clientX 和 clientY

• e.clientX : 鼠标距离可视区域左侧距离。
• e.clientY : 鼠标距离可视区域上侧距离。

四、Scroll 滚动

window.onscroll() 方法

当鼠标滚轮滚动网页的时候，会触发 window.onscroll() 方法。所以可以用来做滚动监听。

加上滚动条之后

console.log(div.scrollWidth); // 523

scrollTop : 获取垂直方向上滚动的距离
scrollLeft : 获取水平方向上滚动的距离

注意：

当某个元素满足 scrollHeight - scrollTop === clientHeight 时，说明垂直滚动条到底了。

当某个元素满足 scrollWidth - scrollLeft === clientWidth 时，说明水平滚动条到底了。

上面两个可以用来判断用户是否滑到底了，如果滑到底了，才进行接下来的表单操作

除了 style , crollTop , scrollLeft 是可读的，其他都是只读

五、获取 html 文档的方式

获取 html / head / title / body 标签的方法如下：

• document.documentElement — 获取 html 标签
• document.head — 获取 head 标签
• document.title — 获取网页标题
• document.body — 获取 body 标签

document.documentElement 表示文档的 html 标签。也即是说，基本结构当中的 html 标签是通过 document.documentElement 访问的，并不是通过 document.html 去访问的。

六、offset / scroll / client 的区别

• offsetWidth = width + padding + border
• offsetHeight = height + padding + border
• scrollWidth = 内容宽度（不包含 border）
• scrollHeight = 内容高度（不包含 border）
• clientWidth = width + padding
• clientHeight = height + padding

offsetTop / offsetLeft:

• 调用者：任意元素。（盒子为主）
• 作用：距离父级盒子中带有定位的距离

scrollTop / scrollLeft：

• 调用者：document.body.scrollTop（window调用）（盒子也可以调用，但必须有滚动条）
• 作用：浏览器无法显示的部分（被卷去的部分）

clientY / clientX：

调用者：event

作用：鼠标距离浏览器可视区域的距离（左、上）