在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---相对于设备屏幕左上角的坐标
