深入理解元素視圖的3個方法_ZenDei技術網路在線

深入理解元素視圖的3個方法

-Advertisement-

[1]getBoundingClientRect [2]getClientRects [3]elementFromPoint ...

前面的話

　　前面介紹了offset偏移、client可視區和scroll滾動，這三部分主要從屬性的角度來對元素尺寸信息進行獲取和修改。本文主要介紹元素視圖的三個方法，包括getBoundingClientRect()、getClientRects()和elementFromPoint()

getBoundingClientRect()

　　判斷一個元素的尺寸和位置是簡單的方法就是使用getBoundingClientRect()

　　Element.getBoundingClientRect()方法返回一個對象，該對象提供當前元素節點的大小、它相對於視口(viewport)的位置等信息。但是，各個瀏覽器返回的對象包含的屬性不相同

firefox: top left right bottom width height x y(其中，x=left，y=top)
chrome/safari/IE9+:top left right bottom width height
IE8-:  top left right bottom

　　問題來了，該方法返回的width和height是可視寬高client，還是滾動寬高scroll，或者是偏移寬高offset，或者是設置寬高呢

<div id="test" style="width: 100px;height: 100px;padding: 10px;line-height: 200px;border:1px solid black;overflow:scroll">內容</div>    
<script>
//chrome/safari: 220(10+200+10)
//firefox/IE: 210(10+200)
console.log(test.scrollHeight)
//103(100+10+10-17)
console.log(test.clientHeight)
//122(100+10+10+1+1)
console.log(test.offsetHeight)
//122(100+10+10+1+1)
console.log(test.getBoundingClientRect().height)
</script>

　　由代碼結果看出，該方法返回的寬高是偏移寬高offset

Element.getBoundingClientRect().width =  border-left-width + padding-left + width + padding-right + border-right-width

Element.getBoundingClientRect().height =  border-top-width + padding-top + height + padding-bottom + border-bottom-width

　　下麵來分析top、left、right、bottom這四個值

　　top: 元素頂部相對於視口的縱坐標

　　left: 元素左邊界相對視口的橫坐標

　　right: 元素右邊界相對視口的橫坐標

　　bottom:元素底部相對於視口的縱坐標

bottom = top + height
right = left + width

　　[註意]該方法的所有屬性值都沒有單位，且給定的是元素在頁面中相對於視口的位置

　　問題又來了，相對於視口和相對於頁面有什麼區別。理論上，與absolute和fixed的區別類似，但表現上與它們正相反。發生滾動時，fixed元素保持不動是為了保持與視口的原始距離；而發生滾動時，getBoundingClientRect()方法的top、left、right、bottom這四個值相應的發生改變，是因為元素位置移動了，與視口距離自然也改變了

bug

　　IE7-瀏覽器把視口的左上角坐標設置為(2,2)，其他瀏覽器則將(0,0)作為起點坐標

<body style="margin:0">
<div id="test" style="width: 100px;height: 50px;padding: 10px;line-height: 200px;overflow:scroll;border:1px solid black">內容</div>    
<script>
//chrome/firefox/safari/IE8+ 0 72(50+10+10+1+1)
//IE7- 2 74(72+2)
console.log(test.getBoundingClientRect().top,test.getBoundingClientRect().bottom)

//chrome/firefox/safari/IE8+ 0 122(100+10+10+1+1)
//IE71 2 124(122+2)
console.log(test.getBoundingClientRect().left,test.getBoundingClientRect().right)
</script>
</body>

相容

　　可以利用IE7-瀏覽器中特性節點的specified屬性實現瀏覽器識別

function getBoundingClientRect(obj){
    var temp = obj.getBoundingClientRect();
    //IE7-瀏覽器
    if(Boolean(obj.attributes[0]) && !obj.attributes[0].specified){
        return{
            left: temp.left -2,
            top: temp.top -2,
            right: temp.right -2,
            bottom: temp.bottom -2
        }
    }else{
        return temp;
    }    
}

getClientRects()

　　getClientRects()方法與getBoundingClientRect()不同，該方法是一個返回元素的數個矩形區域的類數組對象。每個類數組對象的參數與getBoundingClientRect()方法相同，每個矩形都有bottom、height、left、right、top和width六個屬性，表示它們相對於視口的四個坐標，以及本身的高度和寬度

　　如果應用於塊級元素，則getClientRects()[0]和getBoundingClientRect()的屬性返回相同的值，且IE7-瀏覽器在getClientRects()方法中，同樣存在視口左上角坐標被設置為(2,2)的bug

<body style="margin:0">
<div id="test" style="width: 100px;height: 50px;padding: 10px;line-height: 200px;overflow:scroll;border:1px solid black">內容</div>    
<script>
//其他瀏覽器返回0 0， IE7-瀏覽器返回 2 2 
console.log(test.getClientRects()[0].top,test.getBoundingClientRect().top)
//其他瀏覽器返回0 0， IE7-瀏覽器返回 2 2 
console.log(test.getClientRects()[0].left,test.getBoundingClientRect().left)
//72(50+10+10+1+1) 72
console.log(test.getClientRects()[0].height,test.getBoundingClientRect().height)
</script>

　　實際上，該方法主要用於內聯元素，內聯元素有多少行，該方法返回的對象有多少個成員。這個方法主要用於判斷行內元素是否換行，以及行內元素的每一行的位置偏移

<body style="margin:0">
<div style="width:100px;"><span id="el">
Hello World
Hello World
Hello World
</span></div>
<script>
console.log(el.getClientRects().length); // 3
console.log(el.getClientRects()[0].left); // 0
console.log(el.getClientRects()[0].right); // 88
console.log(el.getClientRects()[0].bottom); // 17
console.log(el.getClientRects()[0].height); // 16
console.log(el.getClientRects()[0].width); // 88
</script>
</body>

elementFromPoint()

　　getBoundingClientRect(x,y)方法使我們能在視口中判定元素的位置。但有時我們想反過來，判定在視口中的指定位置上有什麼元素。這可以用Document對象的elementFromPoint()方法來判定。傳遞X和Y坐標(相對於視口)，該方法選擇在指定坐標的最上層和最裡層的Element對象。如果指定的點在視口以外，elementFromPoint()返回null

　　[註意]最上層是指z-index最大的元素；最裡層是指最裡層的子元素

　　這個方法可以用來檢測元素是否發生重疊或是碰撞

<body style="margin:0">
<div id="test" style="width: 100px;height: 100px;">
    <span id="span1">123</span>
</div>
<script>
console.log(document.elementFromPoint(2,2).id); //span1
</script>

您的分享是我們最大的動力!