如何查询元素尺寸、位置偏移及鼠标坐标？

本文共计959个文字，预计阅读时间需要4分钟。

在开发过程中，经常需要记录元素宽度、偏移量等几个常用属性。今天闲暇之余，便将这些记录下来：

- 元素宽度：`width`- 元素高度：`height`- 偏移量：`offsetWidth + clientWidth + offsetWidth`

最近在开发过程中，发现获取元素宽度、偏移量的几个常用属性总是在不断的忘记，今天闲暇无事便将这些记录下来。

以下width与height性质等同。

获取元素宽度 width clientWidth offsetWidth scrollWidth 组成 content content+padding content+padding+border Content+padding+滚动条宽度 是否只读 否 是 是 否 width

• width=content
• style.width 的返回值自带单位px；
• 这个width的具体组成部分是由盒子模型决定的，默认的width即为内容区宽度；
• 当样式写在行内的时候，如 <div id="box" style="width:100px">时，用style.width可以获取元素的宽度。但是，当样式写在样式表中时，如 ＃box{ width: 100px; }, 而style.width所返回的值为空。

clientWidth

• clientWidth=content+padding
• 只读属性；
• 当元素超出父容器时，宽度即为可视区宽度；

offsetWidth

• offsetWidth=content+padding+border
• 只读属性；
• 当元素超出父容器时，宽度即为可视区宽度；

scrollWidth

• scrollWidth=Content+padding+滚动条宽度(scrollLeft)
• 只读属性；
• 元素的真实宽度，当超出父元素并有滚动条时，scrollWidth=clientWidth+scrollLeft，不包含border；

获取元素偏移距离 scrollLeft left 描述 滚动条宽度 超出父容器的左侧偏移距离 是否只读 是 否 scrollLeft

• scrollLeft为超出父容器左侧滚动条宽度

left

• left为超出父容器左侧的偏移距距离
• 只在开启定位，脱离文档流后有效

获取鼠标位置

• 鼠标位置属性全部可写

clientX offsetX pageX screenX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标 以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标，因此当页面有左侧滚动条时，pageX=clientX+滚动条宽度 计算机屏幕左上顶角为原点，定位 x 轴坐标 位置相关的几个常见方法 getBoundingClientRect scrollTo scroll scrollby 调用方式 dom.getBoundingClientRect() scrollTop(left,top)或scrollTop(optionObj) scroll(left,top)或scroll(optionObj) scrollby(left,top)或scrollby(optionObj) 描述 该方法会返回一个矩形对象，用于获取元素相对于浏览器视口的位置以及自身大小 滚动到文档的特定位置 滚动到文档的特定位置 滚动一段特定距离 getBoundingClientRect

• 返回值示例

{ bottom: 615.125 height: 64 left: 241.60000610351562 right: 1521.6000061035156 top: 551.125 width: 1280 x: 241.60000610351562 y: 551.125 }

• 与我们平时理解的不同，该对象中的left和right都是相对于浏览器左侧视口的距离，同理bottom和top是相对于上侧的；
• 当视口存在滚动条并发生滚动时，left、right等属性值会随之改变，如果想获取距离浏览器窗口的绝对距离，可以考虑将当前的left加上window.offsetX
• 通过height和width可以获取到元素实际大小