JS学习笔记之element.offsetWidth、element.clientWidth、element.scrollWidth的区别

最近在学习JavaScript的时候将element.offsetWidth、element.clientWidth、element.scrollWidth的区别以及三个系列的用法分享给大家

---

一、作用对比:

共同:三个系列都可以返回元素大小。

不同:
1.element.offsetWidth:返回自身包括padding、边框、内容区的宽度、返回数值不带单位

2.element.clientWidth:返回自身包括padding、内容区的宽度、不含边框、返回数值不带单位

3.element.offsetWidth:返回自身实际宽度、不含边框，返回数值不带单位

二、用法对比:

1.offset系列经常用于获得元素位置 offsetLeft offsetTop

2.client系列经常用于获取元素大小 clientWidth clientHeight

3.scroll系列经常用于获取滚动距离 scrollTop scrollLeft

4.页面滚动的距离通过window.pageYOffset获得

---

总结

以上就是今天要跟大家分享的element.offsetWidth、element.clientWidth、element.scrollWidth的区别以及三个系列的用法