Cilent/Scroll/Offset家族

Cilent

clientWidth：可视区域的宽度、contentWidth+左右padding

clientHeight：可视区域高度、contentHeight+上下padding

clientTop：上边框的宽度、boder-top

clientLeft：左边框宽度、border-left

Offset

offsetWidth：可视区域宽度（包括边框）、contentWidth+左右padding+左右border

offsetHeight：可视区域高度、contentHeight+上下padding+上下border

offsetLeft：距离第一个有定位的父盒子左边的距离、如果无定位、则选择为body

offsetTop：距离第一个有定位的父盒子上边的距离，如果无定位，选择为body

offsetXXX和style.XXX的区别：
1、offset可以获取所有的。style.XXX只能获取行内的

2、offset返回的是数值。style.XXX返回字符串，带单位

3、offset不可以更改，style.XXX可以更改

Scroll

scrollWidth:整个区域的宽度，体现在有左右滚动条上、可视区域宽度+隐藏
宽度

scrollHeight：整个区域的高度，体现在有上下滚动条上、可视区域宽度+隐藏宽度

scrollLeft：体现在有左右滚动条上、滚动条走的长度

scrollTop：体现在有上下滚动条上、滚动条走的长度

 <div id="box"></div>

#box{
      width: 200px;
      height: 200px;
      background-color: forestgreen;
      padding: 20px;
      border: 10px solid #000;
    }

// Width height
   //border+padding+content
   console.log(box.offsetWidth, box.offsetHeight);//260 260
   //content+padding
   console.log(box.clientWidth, box.clientHeight);//240 240
   //滚动的宽度和高度
   console.log(box.scrollWidth, box.scrollHeight);//240 240

   //top left
   //距离有定位的父盒子左边的距离和上边
   console.log(box.offsetLeft, box.offsetTop);//8 8
   //左边边框的宽度，右边边框的高度
   console.log(box.clientLeft, box.clientTop);//10 10
   //左边滚动的长度和上边
   console.log(box.scrollLeft, box.scrollTop);//0 0