基于js中style.width與offsetWidth的區(qū)別(詳解)

更新時間：2017年11月12日 11:35:57 作者：Green_Bull

下面小編就為就大家?guī)硪黄趈s中style.width與offsetWidth的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

作為一個初學(xué)者，經(jīng)常會遇到在獲取某一元素的寬度（高度、top值...）時，到底是用 style.width還是offsetWidth的疑惑。

1. 當(dāng)樣式寫在行內(nèi)的時候，如 <div id="box" style="width:100px">時，用 style.width或者offsetWidth都可以獲取元素的寬度。

但是，當(dāng)樣式寫在樣式表中時，如＃box{ width: 100px; }, 此時只能用offsetWidth來獲取元素的寬度，而style.width所返回的值為空。

2. style.width 獲取的元素寬度只是div的寬度，不包括border、和padding所占的寬度，且寬度值是帶單位px的。

offsetWidth 獲取的元素寬度為width+border+padding的值（不包括margin），且返回值只為一個數(shù)值，不帶單位。

如下面的例子所示：

<head>
    <script>
      window.onload = function(){
        var box = document.getElementById('box');
        console.log(box.style.width); 
        console.log(box.offsetWidth); 
       }
</script>
  </head>
  <body>
    <div id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></div>
  </body>

控制臺輸出的第一個結(jié)果為： 300px

控制臺輸出的第二個結(jié)果為： 308 注：300+ 3x2 +1x2 = 308, 且不帶單位

3. style.width 也可以在js中用來設(shè)置元素的寬度，而offsetWidth不可以。

如下面的例子所示：

<script>
      window.onload = function(){
        var box = document.getElementById('box');
        box.style.width = '200px';
        console.log(box.offsetWidth);
        console.log(box.style.width);
        box.offsetWidth = '400px';
        console.log(box.offsetWidth);
        console.log(box.style.width);
      }
    </script>
  </head>
  <body>
    <div id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></div>
  </body>

控制臺輸出的結(jié)果分別為 208 200px 208 200px

也就是說通過style.width 設(shè)置寬度成功，而通過offsetWidth設(shè)置寬度失敗。

以上這篇基于js中style.width與offsetWidth的區(qū)別(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: