js你真的瞭解offsetWidth嗎

標籤：style   blog   color   width   io   re   

offsetWidth是什嗎？

答：它可以擷取物體寬度的數值

 

那麼就只是這樣嗎！

html部分

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

 

請看上面的html，你知道div1的offsetWidth是多少嗎？

是不是200啊

 

哈哈，錯了

div1的offsetWidth是206

 

為什麼?

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

200+2+4=206

 

樣本：讓div變窄

現象：onmouseover時，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>

 

運行上面樣本後，你會發現一個奇怪的現象:

div在變寬

 

我們不是要div變窄的嗎！它怎麼越來越寬了呢？

 

那麼這個問題，怎麼解決呢？

 

解決方式：

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

 

但是發現，onmouseover時，div它不動呢？

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

 

所以需要調整成

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

 

其實，我們還可以寫成一個通用的方法，可以擷取任意一個樣式

方法：function getStyle(obj,name)

注意：此時樣式可以不是行間樣式，也能擷取

 

知識點：

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){    //IE        return obj.currentStyle[name];    } else {        return getComputedStyle(obj,false)[name];    //非IE    }        }</script>