我們先來看看這個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>
這樣程序運行就不會有任何問題了。