快捷導(dǎo)航

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

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

下面小編就為就大家?guī)?lái)一篇基于js中style.width與offsetWidth的區(qū)別(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

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

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

offsetWidth 獲取的元素寬度為width+border+padding的值（不包括margin），且返回值只為一個(gè)數(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>

控制臺(tái)輸出的第一個(gè)結(jié)果為： 300px

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

3. style.width 也可以在js中用來(lái)設(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>

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

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

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

您可能感興趣的文章:

相關(guān)文章

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