基于js中style.width與offsetWidth的區(qū)別(詳解)
作為一個(gè)初學(xué)者，經(jīng)常會(huì)遇到在獲取某一元素的寬度（高度、top值...）時(shí)，到底是用 style.width還是offsetWidth的疑惑。
1. 當(dāng)樣式寫在行內(nèi)的時(shí)候，如 <div id="box" style="width:100px">時(shí)，用 style.width或者offsetWidth都可以獲取元素的寬度。
但是，當(dāng)樣式寫在樣式表中時(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è)參考，也希望大家多多支持腳本之家。
- js獲取元素的偏移量offset簡(jiǎn)單方法(必看)
- 詳解原生js實(shí)現(xiàn)offset方法
- JavaScript中offsetWidth的bug及解決方法
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- javascript中offset、client、scroll的屬性總結(jié)
- JavaScript中的getTimezoneOffset()方法使用詳解
- js實(shí)現(xiàn)jquery的offset()方法實(shí)例
- Javascript 運(yùn)動(dòng)中Offset的bug解決方案
- javascript中style.left和offsetLeft的用法說(shuō)明
- JS OffsetParent屬性深入解析
- JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果)實(shí)例代碼
- JS中offset和勻速動(dòng)畫詳解
相關(guān)文章
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)?lái)一篇js-FCC算法-No repeats please字符串的全排列(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
javascript面向?qū)ο笾蚕沓蓡T屬性與方法及prototype關(guān)鍵字用法
這篇文章主要介紹了javascript面向?qū)ο笾蚕沓蓡T屬性與方法及prototype關(guān)鍵字用法,實(shí)例分析了prototype關(guān)鍵字在共享成員屬性與方法中的原理與使用技巧,需要的朋友可以參考下2015-01-01
使javascript也能包含文件...2006-10-10
JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼
這篇文章主要介紹了JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼 ,需要的朋友可以參考下2017-10-10
JavaScript中的console.trace()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.trace()函數(shù)詳細(xì)介紹,console.trace()函數(shù)用來(lái)打印函數(shù)調(diào)用的棧信息,需要的朋友可以參考下2014-12-12
javascript 改變網(wǎng)頁(yè)加載的CSS
javascript 改變網(wǎng)頁(yè)加載的CSS主要通過(guò)動(dòng)態(tài)響應(yīng)select觸發(fā)的選項(xiàng)變化控制link標(biāo)簽加載的css,以實(shí)現(xiàn)不依賴cookie控制的頁(yè)面css樣式動(dòng)態(tài)加載功能,需要的朋友可以參考一下2007-12-12
這篇文章主要介紹了JS 數(shù)組和對(duì)象的深拷貝操作,結(jié)合實(shí)例形式分析了JS 數(shù)組和對(duì)象的深拷貝基本原理與操作技巧,需要的朋友可以參考下2020-06-06
有些時(shí)候我們需要針對(duì)某些IE下的兼容性寫單獨(dú)的JS處理代碼,這只是簡(jiǎn)簡(jiǎn)單單為了兼容行啊，有多種方法可以實(shí)現(xiàn)，小編整理了一下，感興趣的朋友可以了解下，或許對(duì)你有所幫助2013-01-01
微信小程序頁(yè)面調(diào)用自定義組件內(nèi)的事件詳解
這篇文章主要介紹了微信小程序頁(yè)面調(diào)用自定義組件內(nèi)的事件詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
本文主要介紹了JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接，避開已存在的鏈接和alt、title中的關(guān)鍵詞的方法。下面跟著小編一起來(lái)看下吧2017-02-02