offset和client两者的区别

前言

最近在看 pink 老师的 JavaScript 的视频，学到 offset 、 client 属性
看到后面跟不上老师的思路，分不清这两者之间的区别
今天下午上课的时候去看了下这两个之间的区别，在 CodePen 上试了下，来记下笔记以后忘了能来复习

offset、 client

• client -> 主要是网页的可视区位置的获取
• offset -> 主要是自身大小的获取

Height & Width

属性	描述
element.clientWidth	获取元素可视区的宽度
element.offsetWidth	获取元素的宽度
element.clientHeight	获取元素可视区的高度
element.offsetHeight	获取元素的高度

• clientWidth 和 clientHeight 获取的值不包含边框
• offsetWidth 和 offsetHeight 获取的值包含左右边框
• 返回值都是 Number 类型

Top & Left

属性	描述
element.clientTop	获取元素的上边框
element.clientLeft	获取元素的左边框
element.offsetTop	获取元素到有定位的父盒子的顶部距离
element.offsetLeft	获取元素到有定位的父盒子的左侧距离

• 返回值都是 Number 类型

clientX & clientY

这个要传入事件对象调用

属性	描述
e.clientX	鼠标距离可视区的左侧距离
e.clientY	鼠标距离可视区的顶部距离

总结

可以看出来 client 主要与可视区有关
而 offset 主要和自身有关