offsetWidth是什么？

答：它可以獲取物體寬度的數(shù)值

?

那么就只是這樣嗎！

html部分

<div id="div1"></div><style> #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;} </style>

?

請(qǐng)看上面的html，你知道div1的offsetWidth是多少嗎？

是不是200啊

?

哈哈，錯(cuò)了

div1的offsetWidth是206

?

為什么?

答：offsetWidth實(shí)際獲取的是盒模型(width+border + padding)

200+2+4=206

?

擴(kuò)展：那么offsetLeft和offsetTop呢

答：?offsetLeft = left + marginLeft

???? offsetTop = top +marginTop

?

?

示例：讓div變窄

現(xiàn)象：onmouseover時(shí)，div變窄

?

原理：

oDiv.style.width = oDiv.offsetWidth - 1 + "px";??

?

js部分

?

<script> window.onload = function(){var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ document.title = oDiv.offsetWidth; setInterval(function(){ oDiv.style.width = oDiv.offsetWidth - 1 + "px"; },30); } } </script>

?

運(yùn)行上面示例后，你會(huì)發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象:

div在變寬

?

我們不是要div變窄的嗎！它怎么越來(lái)越寬了呢？

?

那么這個(gè)問(wèn)題，怎么解決呢？

?

解決方式：

用oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px";

?

但是發(fā)現(xiàn)，onmouseover時(shí)，div它不動(dòng)呢？

原因：oDiv.style.width，它只能獲取行間的樣式

?

所以需要調(diào)整成

<div id="div1" style="width:200px;"></div>

?

其實(shí)，我們還可以寫成一個(gè)通用的方法，可以獲取任意一個(gè)樣式

方法：function getStyle(obj,name)

注意：此時(shí)樣式可以不是行間樣式，也能獲取

?

知識(shí)點(diǎn)：

IE寫法：currentStyle

非IE寫法: getComputedStyle

?

完整代碼，如下

<div id="div1"></div><style> #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;} </style>

　　

<script> window.onload = function(){var oDiv = document.getElementById("div1");oDiv.onmouseover = function(){document.title = oDiv.offsetWidth;setInterval(function(){//oDiv.style.width = oDiv.offsetWidth - 1 + "px";//oDiv.style.width = parseInt(oDiv.style.width) - 1 + "px"; oDiv.style.width = parseInt(getStyle(oDiv,"width"))- 1 + "px"; },30);}}//獲取行間任意樣式 function getStyle(obj,name){ if(obj.currentStyle){ //IEreturn obj.currentStyle[name];} else {return getComputedStyle(obj,false)[name]; //非IE }}</script>

轉(zhuǎn)載于:https://www.cnblogs.com/huaci/p/3863797.html

總結(jié)

以上是生活随笔為你收集整理的js你真的了解offsetWidth吗的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。