offsetLeft、offsetWidth、clientWidth、scrollWidth、style.width···你都分清了吗？

仍是先来点前戏，哦不，前言吧，主要想说一下为何我会想把这些东西拿出来作一个区分，这还要从二十多年前的夏天提及······扯远了扯远了，主要仍是前不久经历了一次面试。哪里的面试我就不说了，他们的面试仍是颇有含量的，其中就问到了这些东西。怎么说呢，这要是平时敲代码这些东西我这种马大哈都是控制台打印试一下就知道是啥了，可是人家面试的时候问你这些区别时你有时间去控制台打印吗？固然是没有的。唉，经历了这个事才发现，本身虽然平时作项目了解了不少东西，可是都没有概括整理成体系，没有把基础打好。这些都是很简单的东西，可是日常咱们用起来的时候要养成对比记忆的习惯，这不，人家问到了吧。因此，我要在哪里跌倒就在哪里歇会儿，呸呸呸，是在哪里跌倒就在哪里爬起来！！！决定把此次的分享安排上，必定要安排的明明白白。

哎呀，一不当心又话痨了，我们闲话少叙，这就开始吧（如下内容有参考一些资料，若是雷同请你们高抬贵手哈）~~~

1.offsetLeft和offsetTop

网上查到的一些花里胡哨的说法真的是看得我蒙圈，这里咱们来讲的通俗一些。

这两个都是只读属性。offsetLeft从字面意思上理解，就是以父元素做为参照点（父元素的定位不能是static），当前元素相对于父元素左边的偏移量。那么offsetTop就是以父元素为参照物，当前元素相对于父元素上边的偏移量。若是没有父元素那么参照点就是body。

这里要注意一点，若是当前定位元素自己是固定定位(position:fixed;)，那么就别费心找爹了，返回的是当前元素与可视窗口的距离。

offsetLeft/offsetTop和style.left/style.top的区别

style.left/style.top和offsetLeft/offsetTop的功能同样，那么它们有什么区别呢？

1.返回值不同：style.left/style.top返回的是字符串，带了单位（px）的，而offsetLeft/offsetTop只返回数字（小数会四舍五入）。

2.可读写性不一样：offsetLeft/offsetTop只读，而style.left/style.top 可读写。

3.如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串（并且必需要定义在html里，若是定义在css里，style.left的值仍然为空，这也是个坑啊，你们谨慎）。

2.offsetWidth和offsetHeight

这两个也是只读属性，先上公式：offsetHeight || offsetWidth = boder + padding + content（不包括margin）

相信你们看了图和公式都很明白了，这里就再也不赘述了。

offsetHeight/offsetWidth和style.height/style.width的区别

1.返回值不同：offsetHeight/offsetWidth返回纯数字（小数会四舍五入），style.height/style.width返回字符串，带单位（px）。

2.可读写性不同：offsetHeight/offsetWidth只读，style.height/style.width可读写。

3.style.height/style.width是不包含边框的哦。仍是用和公式表示一下：offsetWidth = style.width + style.padding + style.border

4.若是没有为元素设置高度，offsetHeight会根据内容获取高度值，style.height会返回undefind

5.style.width仅仅能返回在HTML中定义的内部样式表的width属性值，若是定义在CSS中就获取不到。

3.clientWidth和clientHeight

只读属性，返回当前节点的可视宽度和可视高度（不包括边框、外边距）（包括内边距）clientHeight = topPadding + bottomPadding+ height - scrollbar.height。

4.scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop和scrollLeft是可读写属性 。scrollTop：返回网页滚动条垂直方向滚去的距离； scrollLeft：返回网页滚动条水平方向滚去的距离；

scrollWidth和scrolltHeight是只读属性，返回当前节点的实际宽度和实际高度（不包括边框）,没有滚动条时和clientWidth和clientHeight同样

5.event.clientX、event.clientY、event.pageX、event.pageY

event.clientX /event.clientY是目标点距离浏览器可视范围的X轴/Y轴坐标

event.pageX /event.pageY 是目标点距离document最左上角的X轴/Y轴坐标

6.innerHeight/innerWidth和outerHeight/outerWidth

innerHeight/innerWidth为只读属性，返回窗口文档显示区的高度和宽度，不包括菜单栏、工具栏和滚动条的宽高。（ 注：IE不支持这些属性，它用document.documentElement 或document.body 的 clientWidth和 clientHeight属性做为替代。）

outerHeight/outerWidth为可读写属性，设置或返回一个窗口的高度和宽度，包括全部界面元素（如工具栏/滚动条）。

总结

但愿这些内容能给你们带来帮助，废话就很少说了，加油哟~~~