js中的各种宽高理解

在js之中有很多方法，属性是与宽高相关的，但是具体的区别又不太清楚。现就这些表示宽高的方法属性做一总结。假设我们有一个元素，代码说明如下：

//html部分
<div id="test">
    <div style="height: 200px;"></div>
</div>
//css部分
#test {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 1px solid blue;
    overflow: auto;
}

下面就是一些获取宽高的方法与属性

var test = document.getElementById("test");
console.log(test.clientHeight + '-' + test.clientWidth);     //120---103
console.log(test.clientLeft + '-' + test.clientTop);         //1---1
//clientHeight,clientWidth指的是元素可视部分的宽高，即等于padding+content；
//如果有滚条，需要减去滚动条的宽高。
//clientLeft，clientTop返回的是元素周围边框的厚度。

console.log(test.offsetHeight + '-' + test.offsetWidth); //122---122
console.log(test.offsetLeft + '-' + test.offsetTop);      //10---10
//offsetHeight,offsetWidth. 等于padding+content+border；
//offsetLeft,offsetTop为相对于offsetParent的偏移量
//他们与是否有滚动条无关

console.log(test.scrollHeight + '-' + test.scrollWidth); //220---103
console.log(test.scrollLeft + '-' + test.scrollTop); //0---0
//scrollHeight,scrollWidth指的是元素实际的宽高,即等于padding+content；
//如果有滚条，需要减去滚动条的宽高。
//scrollLeft，scrollTop指的是元素被卷起的宽高，可读可写

除此之外事件对象event还有一些属性用以获取坐标
event.clientX,event.clientY---相对于浏览器可视区左上角的坐标
event.offsetX,event.offsetY---相对于事件源左上角的坐标
event.pageX,event.pageY---相对于整个网页左上角的坐标
event.screenX,event.screenY---相对于设备屏幕左上角的坐标