獲取dom元素的寬度和高度

一、獲取css的大小

1.第一種通過內聯樣式

    var box = document.getElementById('box');
    var w = box.style.width;
    var h = box.style.height;

2.通過計算元素的大小（但是在ie情況下有一個問題，那就沒寫widht和height的css就返回auto）;

    var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
    var w = style.width;
    var h = style.height;

3.通過CSSStyleSheet對象中的cssRules(或rules)屬性獲取元素大小（但是無法獲得計算的樣式）

    var sheet = document.styleSheets[0];
    var rule = (sheet.cssRules || sheet.rules)[0];
    var w = rule.style.width;
    var h = rule.style.height;

以上三種方法都不行。

二、獲取實際的大小

1.clientWidth和clientHeight

    var w = box.clientWidth;
    var h = box.clientHeight;

說明：padding和scroll變動，才有變化

2.scrollWidth 和box.scrollHeight;

    var w = box.scrollWidth;
    var h = box.scrollHeight;

說明，1）border變化，不同瀏覽器有不同變化2）padding變化，有變化3)margin變化，無變化

3.offsetWidth和offsetHeight

    var w = box.scrollWidth;
    var h = box.scrollHeight;

說明，padding和border有變動，才有變化

三、獲取元素周變的距離（原本只能從左邊和上邊）

1.clientLeft 和 clientTop
這組屬性可以獲取元素設置了左邊框和上邊框的大小。

    var l = box.clientLeft;
    var t = box.clientTop;

2.獲取相對父級元素的位置

    var l = box.offsetLeft;
    var t = box.offsetTop;
    var parent = box.offsetParent;  //獲取伏擊元素，返回body

說明，如果沒有position：absolute;如果每個瀏覽器有不同解釋

那么獲取多層中的元素到body或html的距離，代碼如下：

    function offsetLeft(element){
        var left = element.offsetLeft;
        var parent = element.offsetParent;
        
        while(parent!== null){
            left += parent.offsetLeft;
            parent = parent.offsetParent;
        }
        return left;
    }

3.

//這組屬性可以獲取滾動條被隱藏的區域大小，也可設置定位到該區域。
box.scrollTop; //獲取滾動內容上方的位置
box.scrollLeft; //獲取滾動內容左方的位置