基于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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uniapp如何手動實現(xiàn)讓input文本框聚焦效果
最近使用uniapp做一個評論的功能,遇到一個需求就是點擊上面的評論圖標(biāo),讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關(guān)于uniapp如何手動實現(xiàn)讓input文本框聚焦效果的相關(guān)資料,需要的朋友可以參考下
2023-12-12
javascript實現(xiàn)點擊按鈕變色
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)點擊按鈕變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
微信小程序行的刪除和增加操作實現(xiàn)詳解
這篇文章主要介紹了微信小程序行的刪除和增加操作實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-09-09
常用JS代碼實例小結(jié)
跟網(wǎng)上的一些常用的不太一樣，個人都有個人常用的代碼，大家看到好東西，不一定什么都會，起碼要知道有這么個東西。方便以后用也方便找。
2009-04-04
詳解JavaScript Promise和Async/Await
這篇文章主要介紹了JavaScript Promise和Async/Await，對異步編程感興趣的同學(xué)，可以參考下
2021-04-04
JavaScript中常用的字符串方法函數(shù)操作方法總結(jié)
這篇文章主要介紹了JavaScript中所有的字符串函數(shù)操作方法整理匯總,包括字符串的長度、連接、查找、截取、替換、分隔、轉(zhuǎn)換等處理方法,以及網(wǎng)址中獲取文件名等等,需要的朋友可以參考下
2023-12-12
詳解如何替換項目中的if-else和switch
這篇文章主要為大家介紹了詳解如何替換項目中的if-else和switch，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
jQuery實現(xiàn)為控件添加水印文字效果(附源碼)
這篇文章主要介紹了jQuery實現(xiàn)為控件添加水印文字效果的方法,涉及jQuery插件jquery.tinywatermark.js的使用技巧,并提供了源碼供讀者下載參考,需要的朋友可以參考下
2015-12-12
JavaScript判斷一個變量是否是數(shù)組的五種方式總結(jié)
在 JavaScript 編程中,我們經(jīng)常需要對不同類型的變量進(jìn)行判斷和處理,其中,判斷一個變量是否是數(shù)組是一項基本且常見的任務(wù),在本篇博客中,我們將介紹幾種常用的方式來判斷一個變量是否是數(shù)組,并探討它們的優(yōu)缺點以及適用場景,需要的朋友可以參考下
2023-11-11
JavaScript回調(diào)函數(shù)callback用法解析
這篇文章主要介紹了JavaScript回調(diào)函數(shù)callback用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-01-01