JavaScript中獲取DOM元素尺寸和位置

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰javascript

本文案例使用的瀏覽器爲Chrome；css

1. 獲取元素的 css 大小

1.1 獲取元素的行內樣式html

<script>
  function boxInfo(){
    let box = document.getElementById('box');
    let w = box.style.width;
    let h = box.style.height;
    console.log(w,h) // 700px 800px
  }
</script>

<body> <div id="box" style="width: 700px;height:800px; background-color: pink;"></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

只是將 style 屬性中的值顯示出來java

1.2 獲取計算後的樣式瀏覽器

<style>
  #box{
    width: 700px;
    height: 800px;
    padding: 10px;
    background-color: pink;
    border: 1px solid red;
  }
</style>

<script> function boxInfo(){ var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle; let w = style.width; let h = style.height; console.log(w,h) // 700px 800px } </script>

<body> <div id="box" ></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

注意：若是不設置元素的寬度和高度，在非IE瀏覽器下返回默認的寬度和高度，在IE下面返回 auto 字符串；markdown

1.3 獲取 < link > 和 < style > 標籤寫入的樣式函數

<style>
  #box{
    width: 700px;
    height: 800px;
    padding: 10px;
    background-color: pink;
    border: 1px solid red;
  }
</style>

<script> function boxInfo(){ var sheet = document.styleSheets[0]; var rule = (sheet.cssRules || sheet.rules)[0]; let w = rule.style.width; let h = rule.style.height; console.log(w,h) // 700px 800px } </script>

<body> <div id="box" ></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

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

getComputedStyle、 element.style 異同：測試

相同點:ui

返回的都是 CSSStyleDeclaration 對象，取相應屬性值得時候都是採用的 CSS 駝峯式寫法，均須要注意 float 屬性；

不一樣點:

element.style 讀取的只是元素的內聯樣式，即寫在元素的 style 屬性上的樣式；而 getComputedStyle 讀取的樣式是最終樣式，包括了內聯樣式、嵌入樣式和外部樣式；
element.style 既支持讀也支持寫，而 getComputedStyle 僅支持讀並不支持寫入；

咱們能夠經過使用 getComputedStyle 讀取樣式，經過 element.style 修改樣式。

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

2. 獲取元素的實際大小

2.1 clientWidth 和 clientHeight

這組屬性可獲取元素可視區的大小，能夠獲得元素內容及內邊距所佔據的空間大小。返回了元素大小，但沒有單位，默認單位是px，若是你強行設置了單位，比如100em之類，它仍是會返回px的大小。對於元素的實際大小，clientWidth 和 clientHeight 理解方式以下：

a. 增長邊框，無變化；
b. 增長外邊距，無變化；
c. 增長內邊距，最終值等於本來大小加上內邊距的大小；
d. 增長滾動條，最終值等於本來大小減去滾動條的大小；

<style>
  #box{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;  /* 對應a理解，結果：200,200 */
    margin: 10px;           /* 對應b理解，結果：200,200*/
    padding: 20px;          /* 對應c理解，結果：240,240*/
    overflow: scroll;       /* 對應d理解，結果：223,223，223=200（css大小）+40（兩邊內邊距）-17（滾動條寬度）*/
  }
</style>

<script> function boxInfo(){ var box = document.getElementById("box"); let w = box.clientWidth; let h = box.clientHeight; console.log(w,h) // 223 223 } </script>

<body> <div id="box" ></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

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

2.2 scrollWidth、scrollHeight

scrollWidth：返回元素的總體寬度，包括因爲溢出而沒法展現在網頁的不可見部分； scrollHeight ：返回元素的總體高度，包括因爲溢出而沒法展現在網頁的不可見部分；

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

增長邊框，不一樣瀏覽器有不一樣解釋（下面在IE8中運行正常，IE6運行不正常）： a. Firefox和Opera瀏覽器會增長邊框的大小； b. IE、Chrome和Safari瀏覽器會忽略邊框大小; c. IE瀏覽器只顯示它原本內容的高度;
增長內邊距，最終值會等於本來大小加上內邊距大小;
增長滾動條，最終值會等於本來大小減去滾動條大小;
增長外邊距，無變化;
增長內容溢出，Firefox、Chrome和IE獲取實際內容高度，Opera比前三個瀏覽器獲取的高度偏小，Safari比前三個瀏覽器獲取的高度偏大;

<style>
  #wrap{
    width: 200px;
    height: 200px;
    background-color: blue;
    padding: 20px;
    overflow: auto;
    border: 1px solid green; 
  }
  #box{
    width: 400px;
    height: 400px;
    padding: 10px;
    background-color: pink;
    border: 1px solid red;
    margin: 20px;                 
  }
</style>

<script> function boxInfo(){ let box = document.getElementById("box"); console.log(box.scrollWidth,box.scrollHeight) // 420 420 } </script>

<body> <div id="wrap"> <div id="box"></div> </div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

2.3 offsetWidth、offsetHeight

這組屬性能夠返回元素實際大小，包含邊框、內邊距和滾動條。返回了元素大小，默認單位是 px，若是沒有設置任何 CSS 的寬和高度，會獲得計算後的寬度和高度。對於元素的實際大小，offsetWidth 和 offsetHeight 理解以下：

增長邊框，最終值會等於本來大小加上邊框大小；
增長內邊距，最終值會等於本來大小加上內邊距大小；
增長外邊距，無變化；
增長滾動條，無變化，不會減少；

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

<style>
  #box{
    background-color: green;
    width: 200px;
    height: 200px;
    border: solid 5px red;       /*結果：210,210*/
    margin: 10px;                /*結果：210,210（無變化）*/
    padding: 20px;              /*結果：250,250*/
    overflow: scroll;          /*結果：250,250（無變化）*/
  }
</style>

<script> function boxInfo(){ var box = document.getElementById("box"); let w = box.offsetWidth; let h = box.offsetHeight; console.log(w,h) // 250 250 } </script>

<body> <div id="box" ></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

3. 獲取元素周邊尺寸（位置）

3.1 clientLeft、clientTop

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

右邊框的寬度：div.offsetWidth - div.clientWidth - div.clientLeft
底邊框的寬度：div.offsetHeight - div.clientHeight - div.clientTop
複製代碼

<style>
  #box{
    width: 200px;
    height: 200px;
    border-top: solid 10px red;
    border-right: solid 20px #00ff00;
    border-bottom: solid 30px blue;
    border-left: solid 40px #808080;
  }
</style>

<script> function boxInfo(){ var box = document.getElementById("box"); console.log(box.clientLeft,box.clientTop) // 40 10 } </script>

<body> <div id="box" ></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

3.2 offsetLeft、offsetTop

這組屬性能夠獲取當前元素相對於父元素的位置。最好將它設置爲定位 position:absolute，不然不一樣的瀏覽器會有不一樣的解釋。

<style>
  #box{
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;        /* 將 position 設置爲 absolute，則全部瀏覽器返回同樣的值 */
    left: 30px;
    top: 20px;
    padding: 10px;            /* 30 20 加上內邊距，不會影響它的位置 */
    border: 1px solid red;    /* 30 20 加上邊框，不會影響它的位置 */
    margin: 50px;             /* 80 70 加上外邊距，位置值會累加 */
  }
</style>

<script> function boxInfo(){ var box = document.getElementById("box"); console.log(box.offsetLeft, box.offsetTop) // 80 70 } </script>

<body> <div id="box" ></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

3.3 scrollTop、scrollLeft

scrollLeft：讀寫元素左側已滾動的距離，即位於元素左邊界與元素中當前可見內容的最左端之間的距離； scrollTop：讀寫元素頂部已滾動的距離，即位於元素頂部邊界與元素中當前可見內容的最頂端之間的距離;

這兩個屬性只能用於元素設置了 overflow 的 css 樣式中，否者這兩個屬性沒有任何意義，且 overflow 的值爲visiblehidden,auto,scroll；
對這兩個參數設置值時，直接用數字就能夠了，否者不起做用；

<style>
  #wrap{
    width: 300px;
    height: 300px;
    background-color: blue;
    padding: 20px;
    overflow: auto;
    border: 1px solid green; 
  }
  #box{
    width: 400px;
    height: 400px;
    background-color: pink;
    padding: 10px;    
    border: 1px solid red;    
    margin: 50px;            
  }
</style>

<script> function boxInfo(){ var wrap = document.getElementById("wrap"); wrap.scrollLeft = 100; // 設置盒子左邊滾出區域寬度爲100像素 wrap.scrollTop = 100; // 設置盒子頂部滾出區域高度爲100像素 console.log(wrap.scrollLeft, wrap.scrollTop) // 100 100 } </script>

<body> <div id="wrap"> <div id="box" ></div> </div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

3.4 offsetParent

獲取父元素；

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

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

<style>
  #wrap{
    width: 300px;
    height: 300px;
    background-color: blue;
    padding: 20px;
    border: 1px solid green; 
    position: absolute;
    top:50px;
    left: 10px;
  }
  #box{
    width: 100px;
    height: 100px;
    background-color: pink;   
    border: 1px solid red;               
  }
</style>

<script> function boxInfo(){ var box = document.getElementById("box"); var left = box.offsetLeft; // 獲得第一層距離 var parent = box.offsetParent; // 獲得第一個父元素 while (parent !== null) { // 若是還有上一層父元素 left += parent.offsetLeft; // 把本層的距離累加 parent = parent.offsetParent; // 獲得本層的父元素 } console.log(left) // 30 return left; } </script>

<body> <div id="wrap"> <div id="box"></div> </div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

3.5 getBoundingClientRect()

返回一個矩形對象，包含四個屬性：left、top、right 和 bottom，分別表示元素各邊與頁面上邊和左邊的距離。

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

<style>
  *{
    margin:0px;
  }
  #box{
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    background-color: pink;   
    border: 1px solid red;               
  }
</style>

<script> function boxInfo(){ let box = document.getElementById("box"); let top = box.getBoundingClientRect().top; // 元素上邊距離頁面上邊的距離 let bottom = box.getBoundingClientRect().bottom; // 元素下邊距離頁面上邊的距離 let left = box.getBoundingClientRect().left; // 元素左邊距離頁面左邊的距離 let right = box.getBoundingClientRect().right; // 元素右邊距離頁面左邊的距離 console.log(top,bottom,left,right) // 10 132 10 132 } </script>

<body> <div id="box"></div> <button onclick="boxInfo()">測試</button> </body>
複製代碼

JavaScript中 獲取DOM元素尺寸和位置

1. 獲取元素的 css 大小

2. 獲取元素的實際大小

3. 獲取元素周邊尺寸（位置）

JavaScript中獲取DOM元素尺寸和位置