我們先來看看這個bug 是怎么產生的。
復制代碼代碼如下:
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
復制代碼代碼如下:
<body>
<div id="div1">
</div>
</body>
以下是用來測試的Javascript代碼 ，目的是 讓div慢慢變窄。
復制代碼代碼如下:
<script type="text/javascript">
setInterval(function(){
var oDiv=document.getElementById("div1");
oDiv.style.width=oDiv.offsetWidth-1+'px';
},30);
</script>
Javascript 代碼 很簡單，運行一下 沒有任何問題，如愿的div在慢慢變小。
那這個offset 的bug又是怎么來的呢？
下面我們動動樣式 就會神奇的事情發生了。。。
我們給div1 加個樣式 border: 1px solid #CCCCFF;
復制代碼代碼如下:
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
border: 1px solid #CCCCFF;
}
</style>
此時在運行代碼 ，發現div 居然往右邊慢慢增大。。。image BUG 驚現。。。。 明明是減1 為什么會出現這種情況。
讓我們想想offset 有什么特點：
舉例： div width : 200px border 1px 。 實際上他得到的offsetWidth 是202px 。
那么，我們說回來，運動剛開始的時候，實際上div 的寬度是200px 那么offsetWidth 是202
這個時候 oDiv.style.width=oDiv.offsetWidth-1+'px'; 這句話就是等于 oDiv.style.width=202-1=201px; 然后在賦值給width
當再次執行這句話的時候 div的寬度是 201px; 這樣的話，每次都會增加1px，反而慢慢變大了。 這就是offset 的bug 。
怎么解決這個問題呢？
其實不用這個offsetWidth 就可以了 。 我們用 width ?。?寫個函數直接獲取 css樣式中width 即可
獲取不在行間中的樣式 ：
復制代碼代碼如下:
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, null)[name];
}
}
那么我們在修改下原來的代碼：
復制代碼代碼如下:
<script type="text/javascript">
setInterval(function(){
var oDiv=document.getElementById("div1");
oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px';
},30);
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, null)[name];
}
}
</script>
這樣程序運行就不會有任何問題了。
