一、直接获取元素样式属性值 – 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: 只能获取行内样式，获取的值可能为空，容易出现NaNoffsetLeft: 获取值特别方便，而且是现成的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 + borderoffsetHeight= height + padding + borderscrollWidth= 内容宽度（不包含 border）scrollHeight= 内容高度（不包含 border）clientWidth= width + paddingclientHeight= height + padding
offsetTop / offsetLeft:
- 调用者：任意元素。（盒子为主）
- 作用：距离父级盒子中带有定位的距离
scrollTop / scrollLeft：
- 调用者：
document.body.scrollTop（window调用）（盒子也可以调用，但必须有滚动条） - 作用：浏览器无法显示的部分（被卷去的部分）
clientY / clientX：
调用者：event
作用：鼠标距离浏览器可视区域的距离（左、上）
