最近在开发过程中，发现获取元素宽度、偏移量的几个常用属性总是在不断的忘记，今天闲暇无事便将这些记录下来。
以下width与height性质等同。
获取元素宽度
|
width |
clientWidth |
offsetWidth |
scrollWidth |
| 组成 |
content |
content+padding |
content+padding+border |
Content+padding+滚动条宽度 |
| 是否只读 |
否 |
是 |
是 |
是 |
width
width=contentstyle.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=Content+padding+滚动条宽度(scrollLeft)- 只读属性；
- 元素的真实宽度，当超出父元素并有滚动条时，
scrollWidth=clientWidth+scrollLeft，不包含border；
获取元素偏移距离
|
scrollLeft |
left |
| 描述 |
滚动条宽度 |
超出父容器的左侧偏移距离 |
| 是否只读 |
否 |
否 |
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可以获取到元素实际大小
原创文章，作者：jamestackk，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/245164.html
