Javascript 運動中Offset的bug解決方案_javascript技巧

我們先來看看這個bug 是怎麼產生的。

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

       

           
       

   

以下是用來測試的Javascript程式碼 ，目的是 讓div慢慢變窄。

複製程式碼 程式碼如下:

Javascript 程式碼 很簡單，運行一下 沒有任何問題，如願的div在慢慢變小。

那這個offset 的bug又是怎麼來的呢？

下面我們動動樣式 就會神奇的事情發生了。 。 。

我們給div1 加個樣式 border: 1px solid #CCCCFF;

複製程式碼 程式碼如下:

此時在執行程式碼 ，發現div 居然往右邊慢慢增大。 。 。 image BUG 驚現。 。 。 。 明明是減1 為什麼會出現這種情況。

讓我們想想offset 有什麼特點：

舉例： div width : 200px  border 1px  。 實際上他得到的offsetWidth 是202px 。

那麼，我們說回來，運動剛開始的時候，其實div 的寬度是200px  那麼offsetWidth 是202

這句話就是等於 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];
                }
            }

那我們在修改下原來的程式碼：

複製程式碼 程式碼如下:

 
這樣程式運行就不會有任何問題了。