對於盒模型的寬高獲取填坑

時間 2019-12-01

標籤對於模型獲取简体版

原文原文鏈接

最近，在作一個項目的時候，要獲取一個盒模型的寬度，那麼當時想到的方法就是el.style.width.咱們先看一段代碼。javascript

 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>這時候咱們就獲取到了寬度值，那麼對於這種獲取的方法，咱們能夠看出，只能獲取到內嵌樣式的寬高，而對於其餘的形式是獲取不到的。css

如今，咱們來思考一下，咱們要怎麼去獲取到不是內嵌樣式的寬高呢？看了不少資料，有這些辦法使咱們能使用的。html

1 el.currentStyle.width; // 可是這個方法有侷限性，那就是隻有IE才支持 java

那麼還有沒有其餘的辦法呢，固然有。window.getComputedStyle(dom)，這個方法能獲取當前元素css的最終屬性值，那麼這個方法就沒有侷限性了嗎，答案是固然是有的，這個方法咱們只能用來獲取，不能用來設置，這就是這個方法的侷限性。dom

還有一種方法，請看下面的代碼：spa

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;

這是對這周工做中遇到的一個小問題的總結。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。