前面的話
前面介紹了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>