JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

这是一组非常容易弄混的参数！都是描述某个盒子元素的宽度、高度以及上或左的距离偏移量。

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。