我要评论这是一组非常容易弄混的参数！都是描述某个盒子元素的宽度、高度以及上或左的距离偏移量。
1. offsetwidth / offsetheight（不包括外边距）
offsetwidth：返回元素的宽度（content+padding+border）
offsetheight：返回元素的高度（content+padding+border）
2. offsettop / offsetleft（相对于父级的偏移量）
类似于子绝父相定位中的top和left，都是相对于有定位父级的偏移距离。
offsettop：返回元素上边框到有定位父级元素的上边框的距离。（如果找不到有定位的父级，那么距离就是它的上边框到body的距离。）
offsetleft：返回元素左边框到有定位父级元素的左边框的距离。（如果找不到有定位的父级，那么距离就是它的左边框到body的距离。）
下图演示的的是没有定位父级的情况：（如果外层盒子给一个定位，那么这里的offsettop/offsetleft都是0px）
3. clientwidth / clientheight（不包括边框和外边距）
client客户端大小：当前元素内容和内边距占据空间的大小，不包括边框。
clientwidth：返回元素的宽度（content+padding）
clientheight：返回元素的高度（content+padding）
// 获取当前页面（客户端）的宽高 console.log(document.documentelement.clientwidth); console.log(document.documentelement.clientheight);
4. clienttop / clientleft（就是边框大小）
clienttop：返回元素上边框大小
clientleft：返回元素左边框大小
5. scrollwidth / scrollheight（不包括边框和外边距）
scrollwidth：返回元素的总宽度，包含由于溢出而无法在网页上显示的不可见部分。
scrollheight：返回元素的总高度，包含由于溢出而无法在网页上显示的不可见部分。
（如果没有溢出，那么和clientwidth/clientheight情况相同。）
6. scrolltop / scrollleft 可读可写！
scrolltop：元素被卷起的高度。
scrollleft：元素被卷起的宽度。
- 一个方法
scrollto() 方法可把窗口内容滚动到指定的坐标。
scrollto(xpos,ypos)
注意：style.width/style.height返回值是字符串类型的，例如返回的是'20px'。而以上这些均返回数字，例如20。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论