JS中元素的宽高和位置-逆战

clientWidth & clientHeight　　客户宽高（元素的width+padding）

offsetWidth & offsetHeight　　偏移宽高 （元素的width+pading+border）即元素实际大小，只与元素设定的width，height，padding，border 有关

scrollWidth & scrollHeight　　滚动宽高  （元素的width+padding）如果元素内容超出容器，出现滚动条，则代表元素内所有内容的宽高 scrollWidth 和 clientWidth的值相同

 没有滚动条时图解

 

有滚动条时

clientLeft &clientTop　　元素边框线的宽高

offsetLeft &offsetTop　　元素有定位时，元素相对于包含块左上角的位置 （该值等同于CSS中定位的 left 和 top 值）

　　　　　　　　　　　元素无定位时，元素相对于页面左上角的位置

scrollLeft & scrollTop　　元素超出容器时，元素顶部相对页面顶部的距离（拉动滚动条时，元素内容卷起部分的宽高）

　　　　　　　　　　　如果没有超出容器（即没有滚动条时）该值为0