基於js中style.width與offsetWidth的區別

阿新 • • 發佈：2019-01-21

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

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

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

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

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

例子1：

<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>

控制檯輸出的第一個結果為： 300px

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

3. style.width 也可以在js中用來設定元素的寬度，而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>

控制檯輸出的結果分別為 208 200px 208 200px

也就是說通過style.width 設定寬度成功，而通過offsetWidth設定寬度失敗。

基於js中style.width與offsetWidth的區別

作為一個初學者，經常會遇到在獲取某一元素的寬度（高度、top值...）時，到底是用 style.width還是offsetWidth的疑惑。1. 當樣式寫在行內的時候，如 <div id="box" style="width:100px">時，用 style.wi

js中style,currentStyle和getComputedStyle的區別

偽類 pro null prop obj 解決 strong 語法 nts js中style,currentStyle和getComputedStyle的區別 MarysMa 在js中用xx.style.marginTop是無法獲取寫在css或<sytle>標簽

js 中使用var與省略var 定義變量的區別

不必要 pos pan 定義就是 body 對象 gpo ole 在js中定義變量的時候，我們習慣了用var，其實省略var也可以用的。今天總結一下，使用var或省略var 定義變量的區別 1、var 私有變量，只能在當前js使用，或者在當前作用域使用，定義私有變量，

js中style,currentStyle,getComputedStyle和getBoundingClientRect的區別以及獲取css操作方法

js中style,currentStyle,getComputedStyle和getBoundingClientRect的區別以及獲取css操作方法在js中,之前我們獲取屬性大多用的都是ele.style.border這種形式的方法,但是這種方法是有侷限性的,該方法只能獲取到行內樣式,獲取不

JS中 for in 與 for of的區別

最直接的區別就是: for in遍歷的是陣列的索引（即鍵名），而for of遍歷的是陣列元素值。 Array.prototype.method=function(){} var myArray=[1,2,4]; myArray.name="陣列"; for (var

JS中建構函式與普通函式的區別及JS建構函式、原型和例項的關係

JS中建構函式與普通函式的區別: https://www.cnblogs.com/cindy79/p/7245566.html JS建構函式、原型和例項的關係: https://blog.csdn.net/u012443286/article/details/78823955 Java

js中雙等號與三等號的區別

首先，== equality 等同，=== identity 恆等。 ==，兩邊值型別不同的時候，要先進行型別轉換，再比較。 ===，不做型別轉換，型別不同的一定不等。一言以蔽之：==先轉換型別再比較，===先判斷型別，如果不是同一型別直接為false。

JS中的onload與jQuery中的ready區別

jQuery的執行機制（onload與ready的區別）結論得出前自行測試: 為了測試是否真如所說的那樣，所以在頁面插入了20000張照片，照片數量少得不出什麼結論，所以改用console.log

簡述js中 for in 與 for of 區別

for in是ES5標準，遍歷key. for of是ES6標準，遍歷value. for (var key in arr){ console.log(arr[key]); } for

JavaScript中style.left與offsetLeft的使用及區別詳解

如果父div的position定義為relative,子div的position定義為absolute，那麼子div的style.left的值是相對於父div的值，這同offsetLeft是相同的，區別在於：1. style.left 返回的是字串，如28px，offsetL

js中offsetLeft/offsetTop與jq中offset().left/offset().top的區別

1.offsetLeft/offsetTop 在頁面任一元素的offsetLeft總是找到離其最近的已經定位的父元素或祖先元素定位，如果沒有，就根據根節點body定位，然後獲取其left值。 2.offset().left/offset().top 返回或設定匹

比較 width 與 offsetwidth 的區別

比較width 與 offsetWidth 的區別 1、offsetWidth > width element.offsetWidth = element.style.width + element.style.padding + element.

JS中style.display和style.visibility的區別

在JS中可以通過設定style.display或者style.visibility屬性來控制元素是否顯示，在style.display=block和style.visibility=visible的時候，元素被顯示，在style.display=none和style.vis

Node.js中request模組與http模組之間的區別

原文https://stackoverflow.com/questions/27783806/what-is-the-difference-between-request-and-http-modules-in-node-js http包含對原生HTTP協議的支援而requ

style.width 和offsetwidth的區別

當我使用JS的時候 , 我發現有時候用style.width不能獲取元素的值. 後面我才明白 style.width只能獲取當前元素的行間樣式,不能獲取元素的內部樣式當你的width或者height寫在CSS樣式中的時候,在JS裡你的style不能獲取到width,

JS中isPrototypeOf 和hasOwnProperty 的區別

另一個 strong 是否指定不同名稱功能成員 eof 1、isPrototypeOf isPrototypeOf是用來判斷指定對象object1是否存在於另一個對象object2的原型鏈中，是則返回true，否則返回false。格式如下： object1.is

js中 substr(), substring(), slice()的區別

高級程序設計方法負數截取字符串一個 cnblogs tro 所有程序設計一、作用　　三者都是基於原字符串創建新字符串的方法。　　接收一到兩個參數，第一個參數截取字符串的開始位置（字符下標，從0開始），第二個參數因方法不同而不同，後面不同點會說到。　　另外，

js中undefined和null的區別

常常 html exist tex 輸出 output 為什麽 hive 存在轉自：http://www.cnblogs.com/eastday/archive/2010/03/03/1677324.html 在JavaScript中存在這樣兩種原始類型:Null與Und

js中eval()和$.parseJSON()的區別

16px 異常 comment 而不是 str on() ajax 鏈接強制之前自己一直對ajax不是特別的熟悉，所以一般都很少用這個去寫功能，但是最近這個項目中用到了，用ajax異步傳數據，json傳數據這個時候就需要去解析傳過來的數據了，eval()和$.parse

Js中JSON.stringify()與JSON.parse()與eval()詳解及使用案例

div 網絡 blog 處理 ive asc 還要 ava 不同 JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。因為采用獨立於語言的文本格式，也使用了類似於C語言家族的習慣，擁有了這些特性使使JSON稱為理想的數據交換語言，作用

基於js中style.width與offsetWidth的區別

相關推薦