第一百一十七節，JavaScript，DOM元素尺寸和位置

 

學習要點：

1.獲取元素CSS大小

2.獲取元素實際大小

3.獲取元素周邊大小

 

本章，咱們主要討論一下頁面中的某一個元素它的各類大小和各類位置的計算方式，以便更好的理解。

 

一．獲取元素CSS大小

 

1.經過style內聯獲取元素的大小

//<div id="box" style="background-color: #2616ff;width: 200px;height: 200px;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //經過style內聯獲取元素的大小
    var asf = document.getElementById('box'); //經過ID獲取到元素標籤
    alert(asf.style.width);  //獲取內聯元素的寬度
    //200px
    alert(asf.style.height); //獲取內聯元素的高度
    //200px
};

PS：style獲取只能獲取到行內style屬性的CSS樣式中的寬和高，若是有獲取；若是沒有則返回空。

 

2.經過計算獲取元素的大小

//<div id="box" style="background-color: #2616ff;width: 200px;height: 200px;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //經過計算獲取元素的大小
    var asf = document.getElementById('box'); //經過ID獲取到元素標籤
    //瀏覽器兼容處理，若是getComputedStyle返回真就用getComputedStyle 方法，不然返回null，執行currentStyle
    var style = window.getComputedStyle ? window.getComputedStyle(asf, null) : null || asf.currentStyle;
    alert(style.width);        //獲取瀏覽器計算後的元素寬度，若是有設置就是獲取設置的寬度，若是沒設置獲取默認寬度                        
    alert(style.height);    //獲取瀏覽器計算後的元素高度，若是有設置就是獲取設置的高度，若是沒設置獲取默認高度        
};

PS：經過計算獲取元素的大小，無關你是不是行內、內聯或者連接，它通過計算後獲得的結果返回出來。若是自己設置大小，它會返回元素的大小，若是自己沒有設置，非IE瀏覽器會返回默認的大小，IE瀏覽器返回auto。

 

3.經過CSSStyleSheet對象中的cssRules(或rules)屬性獲取元素大小，就是獲取鏈接或者內聯樣式大小

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //經過CSSStyleSheet對象中的cssRules(或rules)屬性獲取元素大小，就是獲取鏈接或者內聯樣式大小
    var sheet = document.styleSheets[0];            //獲取樣式表對象集合裏的第一個樣式表對象
    //若是瀏覽器執行cssRules不成功，就執行rules，來獲取樣式表對象裏的選擇器集合，獲得的是選擇器集合
    var rule = (sheet.cssRules || sheet.rules)[0];        //獲取第一條css選擇器
    alert(rule.style.width);                            //200px、空
    alert(rule.style.height);                            //200px、空

};

PS：cssRules(或rules)只能獲取到內聯和連接樣式的寬和高，不能獲取到行內和計算後的樣式。

 

總結：以上的三種CSS獲取元素大小的方法，只能獲取元素的CSS大小，卻沒法獲取元素自己實際的大小。好比加上了內邊距、滾動條類的。

 

二．獲取元素實際大小

1.clientWidth和clientHeight，這組屬性能夠獲取元素可視區的大小，能夠獲得元素內容及內邊距所佔據的空間大小。

clientWidth屬性，獲取元素可視區的寬度，能夠獲得元素內容及內邊距所佔據的空間大小

clientHeight屬性，獲取元素可視區的高度，能夠獲得元素內容及內邊距所佔據的空間大小

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //clientWidth和clientHeight，這組屬性能夠獲取元素可視區的大小，能夠獲得元素內容及內邊距所佔據的空間大小。
    alert(asf.clientWidth);  //獲取實際寬度，包含內邊距
    alert(asf.clientHeight);  //獲取實際高度，包含內邊距
};

PS：返回了元素大小，但沒有單位，默認單位是px，若是你強行設置了單位，好比100em之類，它仍是會返回px的大小。(CSS獲取的話，是照着你設置的樣式獲取)。

PS：對於元素的實際大小，clientWidth和clientHeight理解方式以下：

1.增長邊框，無變化，

2.增長外邊距，無變化，

3.增長滾動條，最終值等於本來大小減去滾動條的大小，

4.增長內邊距，最終值等於本來大小加上內邊距的大小，

PS：若是說沒有設置任何CSS的寬和高度，那麼非IE瀏覽器會算上滾動條和內邊距的計算後的大小，而IE瀏覽器則返回0。

 

2.scrollWidth和scrollHeight，這組屬性能夠獲取滾動內容的元素大小。

scrollWidth獲取滾動內容的元素寬度

scrollHeight獲取滾動內容的元素高度

 

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //scrollWidth和scrollHeight，這組屬性能夠獲取滾動內容的元素大小。
    alert(asf.scrollWidth);  //scrollWidth獲取滾動內容的元素寬度
    alert(asf.scrollHeight);  //scrollHeight獲取滾動內容的元素高度
};

 

PS：返回了元素大小，默認單位是px。若是沒有設置任何CSS的寬和高度，它會獲得計算後的寬度和高度。

PS：對於元素的實際大小，scrollWidth和scrollHeight理解以下:

1.增長邊框，不一樣瀏覽器有不一樣解釋：

a)         Firefox和Opera瀏覽器會增長邊框的大小

b)        IE、Chrome和Safari瀏覽器會忽略邊框大小

c)         IE瀏覽器只顯示它原本內容的高度

2.增長內邊距，最終值會等於本來大小加上內邊距大小

3.增長滾動條，最終值會等於本來大小減去滾動條大小

4.增長外邊據，無變化。

5.增長內容溢出，Firefox、Chrome和IE獲取實際內容高度，Opera比前三個瀏覽器獲取的高度偏小，Safari比前三個瀏覽器獲取的高度偏大。

 

 

3.offsetWidth和offsetHeight，這組屬性能夠返回元素實際大小，包含邊框、內邊距和滾動條。

offsetWidth獲取元素實際寬度，包含邊框、內邊距和滾動條
offsetHeight獲取元素實際高度，包含邊框、內邊距和滾動條

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //offsetWidth和offsetHeight，這組屬性能夠返回元素實際大小，包含邊框、內邊距和滾動條。
    alert(asf.offsetWidth);  //offsetWidth獲取元素實際寬度，包含邊框、內邊距和滾動條
    alert(asf.offsetHeight);  //offsetHeight獲取元素實際高度，包含邊框、內邊距和滾動條
};

PS：返回了元素大小，默認單位是px。若是沒有設置任何CSS的寬和高度，他會獲得計算後的寬度和高度。

PS：對於元素的實際大小，offsetWidth和offsetHeight理解以下：

1.增長邊框，最終值會等於本來大小加上邊框大小，爲220；

2.增長內邊距，最終值會等於本來大小加上內邊距大小，爲220；

3.增長外邊據，無變化；

4.增長滾動條，無變化，不會減少；

PS：對於元素大小的獲取，通常是塊級(block)元素而且以設置了CSS大小的元素較爲方便。若是是內聯元素(inline)或者沒有設置大小的元素就尤其麻煩，因此，建議使用的時候注意。

 

三．獲取元素周邊大小

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

clientLeft獲取左邊框的寬度
clientTop獲取上邊框的寬度

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //clientLeft和clientTop這組屬性能夠獲取元素設置了左邊框和上邊框的大小。
    alert(asf.clientLeft);  //clientLeft獲取左邊框的寬度
    alert(asf.clientTop);  //clientTop獲取上邊框的寬度
};

PS：目前只提供了Left和Top這組，並無提供Right和Bottom。若是四條邊寬度不一樣的話，能夠直接經過計算後的樣式獲取，或者採用以上三組獲取元素大小的減法求得。

 

 

2.offsetLeft和offsetTop這組屬性能夠獲取當前元素相對於父元素的位置。

offsetLeft獲取當前元素相對於父元素左邊的位置
offsetTop獲取當前元素相對於父元素上邊的位置
offsetParent獲取當前元素的父元素對象

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //offsetLeft和offsetTop這組屬性能夠獲取當前元素相對於父元素的位置
    alert(asf.offsetLeft);  //offsetLeft獲取當前元素相對於父元素左邊的位置
    alert(asf.offsetTop);  //offsetTop獲取當前元素相對於父元素上邊的位置
    //offsetParent獲取當前元素的父元素對象
    alert(asf.offsetParent);  //offsetParent獲取當前元素的父元素對象

    //若是有兩層要獲取兩層總共的位置
    //當前元素上位置加父元素上位置
    alert(asf.offsetTop + asf.offsetParent.offsetTop);
};

PS：offsetParent中，若是自己父元素是<body>，非IE返回body對象，IE返回html對象。若是兩個元素嵌套，若是上父元素沒有使用定位position:absolute，那麼offsetParent將返回body對象或html對象。因此，在獲取offsetLeft和offsetTop時候，CSS定位很重要。

若是說，在不少層次裏，外層已經定位，咱們怎麼獲取裏層的元素距離body或html元素之間的距離呢？也就是獲取任意一個元素距離頁面上的位置。那麼咱們能夠編寫函數，經過不停的向上回溯獲取累加來實現。

若是多層的話，就必須使用循環或遞歸。

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    alert(offsetLeft(asf));

    //若是多層的話，就必須使用循環或遞歸。
    function offsetLeft(element) {
        var left = element.offsetLeft;                //獲得第一層距離
        var parent = element.offsetParent;            //獲得第一個父元素

        while (parent !== null) {                    //若是還有上一層父元素
        left += parent.offsetLeft;                //把本層的距離累加
        parent = parent.offsetParent;            //獲得本層的父元素
        }                                    //而後繼續循環
        return left;
    }

};

 

3.scrollTop和scrollLeft這組屬性能夠獲取滾動條被隱藏的區域大小，也可設置定位到該區域。就是溢出隱藏部分的大小

scrollTop獲取或設置滾動條上面被隱藏的區域大小
scrollLeft獲取或設置滾動條左邊被隱藏的區域大小

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //scrollTop和scrollLeft這組屬性能夠獲取滾動條被隱藏的區域大小，也可設置定位到該區域。就是溢出隱藏部分的大小
    alert(asf.scrollTop);  //scrollTop獲取或設置滾動條上面被隱藏的區域大小
    alert(asf.scrollLeft);  //scrollLeft獲取或設置滾動條左邊被隱藏的區域大小
    scrollStart(asf);

    //若是要讓滾動條滾動到最初始的位置，那麼能夠寫一個函數：
    function scrollStart(element) {
        if (element.scrollTop != 0){
            element.scrollTop = 0;
        }
    }
    
};

 

DOM的方法獲取元素位置

getBoundingClientRect()方法，獲取元素位置，這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。

使用方式：

元素節點.getBoundingClientRect().要獲取的元素方位

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //getBoundingClientRect()方法，獲取元素位置，這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
    var fw = asf.getBoundingClientRect();
    alert(fw.top);   //查看元素上位置
    alert(fw.right);  //查看元素右位置
    alert(fw.bottom);  //查看元素下面位置
    alert(fw.left);   //查看元素左面位置

};

PS：IE、Firefox3+、Opera9.五、Chrome、Safari支持，在IE中，默認座標從(2,2)開始計算，致使最終距離比其餘瀏覽器多出兩個像素，咱們須要作個兼容。

//<div id="box" class="box1">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var asf = document.getElementById('box');  //經過ID獲取到元素節點
    //getBoundingClientRect()方法，獲取元素位置，這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
    alert(getRect(asf).top); //執行函數，獲取函數裏的對象屬性

    //各版本瀏覽器兼容
    function getRect(element) {
        var rect = element.getBoundingClientRect();
        var top = document.documentElement.clientTop;
        var left = document.documentElement.clientLeft;

        return {
            top : rect.top - top,
            bottom : rect.bottom - top,
            left : rect.left - left,
            right : rect.right - left
        }
    }
};

PS：分別加上外邊據、內邊距、邊框和滾動條，用於測試全部瀏覽器是否一致。