對於盒模型的寬高獲取填坑
阿新 • • 發佈：2017-08-13
裏的 ack element 一段 rip 為什麽 getc 局限性 tro
最近，在做一個項目的時候，要獲取一個盒模型的寬度，那麽當時想到的方法就是el.style.width.我們先看一段代碼。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>juke</title> 5 <style type="text/css"> 6 #box { 7 width: 300px; 8 height: 300px; 9 border: 1px solid #000; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box"></div> 15 16 <script type="text/javascript"> 17 var width = document.getElementById("box").style.width; 18 console.log(width); // "" 19 </script> 20 </body> 21 </html>
最後輸出的是""，很詫異為什麽獲取不到寬度呢？當我們把第14行的代碼改動一下，<div id="box" style="width=300px"></div>
現在，我們來思考一下，我們要怎麽去獲取到不是內嵌樣式的寬高呢？看了很多資料，有這些辦法使我們能使用的。
1 el.currentStyle.width; // 但是這個方法有局限性，那就是只有IE才支持
那麽還有沒有其他的辦法呢，當然有。window.getComputedStyle(dom)，這個方法能獲取當前元素css的最終屬性值，那麽這個方法就沒有局限性了嗎，答案是當然是有的，這個方法我們只能用來獲取，不能用來設置，這就是這個方法的局限性。
還有一種方法，請看下面的代碼：
1 var box=document.getElementById(‘box‘); 2 // 這個屬性有四個值top、right、left、bottom 3 // 它是代表和頁面上邊和左邊的距離 4 box.getBoundingClientRect().top; // 元素上邊到視窗上邊的距離 5 box.getBoundingClientRect().right // 元素右邊到視窗左邊的距離 6 box.getBoundingClientRect().bottom; // 元素下邊到視窗上邊的距離 7 box.getBoundingClientRect().left; // 元素左邊到視窗左邊的距離 8 9 // 獲得元素的寬高,說一點在標準盒子模型下，他獲取到的盒子的寬度是content-width+border+padding 而在IE盒子模型下他獲取到的是你設置的寬度，因為在IE盒子模型下padding和border是算在width裏的
10 box.getBoundingClientRect().width;
這是對這周工作中遇到的一個小問題的總結。
對於盒模型的寬高獲取填坑