元素寬高
element.offsetWidth/offsetHeight border-box(offsetHeight = padding + height + border = clientHeight + 滾動條 + 邊框)
element.offsetLeft/offsetTop 相對於最近的祖先定位元素(CSS position 屬性被設定為 relative、absolute 或 fixed 的元素)的偏移值
element.clientWidth/clientHeight padding-box(元素可視區域的高度，也就是說元素或視窗中可以看到內容的這個區域的高度，滾動條不算在內。clientHeight = topPadding + bottomPadding+ height - 水平滾動條高度)
element.clientLeft/clientTop padding + border厚度
element.scrollLeft/scrollTop 元素滾動畫素大小，可讀可寫
element.scrollWidth/scrollHeight(ie9+) 元素的滾動寬和高，等於clientHeight + scrollTop + 下面隱藏的部分的高度,
由於元素內建滾動條在border內部，所以其等於padding-box + scrollLeft/top,
scrollHeight是元素的padding加元素內容的高度。這個高度與滾動條無關，是內容的實際高度。
計算方式 ：scrollHeight = topPadding + bottomPadding + 內容margix box的高度。
element.getBoundingClientRect 視口座標top,left,bottom,right,即border-box寬高(ie9+)width,height
元素content-box寬高
content-box = border-box - 厚度 = offsetWidth/offsetHeight(或者getBoundingClientRect計算得到) - clientLeft/clientTop
通過樣式獲取尺寸
window.getComputedStyle(元素,偽類)(ie9+) 偽類引數是必須的，不是偽類，設定為null，獲取元素的實時樣式
element.currentStyle(ie6-8) 等同於上者
getComputedStyle.getPropertyValue(ie9+) 取屬性樣式，根據css樣式名，而不是駝峰
style.getAttribute()(ie6-8) 獲取屬性樣式，使用駝峰
element.style 讀寫元素的行內樣式，標籤樣式和外聯樣式無效
滑鼠位置
event.clientX/clientY 滑鼠視口座標，相對於window，相對座標
event.pageX/pageY(ie9+) 滑鼠文件座標，相對於document，絕對座標
window尺寸
window.innerWidth/innerHeight(ie9+) 視口寬高，即window的寬高，不包括瀏覽器邊框
window.pageXOffset/pageYOffset(ie9+) 頁面滾動的畫素值(所有瀏覽器表現一致，優先選用，而scrollLeft/scrollTop各個瀏覽器表現不一致)
window滾動畫素值相容寫法
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
元素視口座標(相對window)
element.getBoundingClientRect()
得到 box = {top,left,right,bottom}
元素文件座標(相對document)，絕對座標
絕對座標 = 視口座標 + 文件滾動距離 - 文件厚度
top: box.top + scrollTop - clientTop,
left: box.left + scrollLeft - clientLeft
文件的厚度(padding+border)
clientTop = docElem.clientTop || body.clientTop || 0;
clientLeft = docElem.clientLeft || body.clientLeft || 0;