快捷導(dǎo)航

Javascript 運動中Offset的bug解決方案

更新時間：2014年12月24日 15:49:55 投稿：hebedich

這篇文章主要介紹了Javascript 運動中Offset的bug解決方案,需要的朋友可以參考下

我們先來看看這個bug 是怎么產(chǎn)生的。

<style type="text/css">

            #div1 {

                width: 200px;

                height: 200px;

                background: red;

            }

        </style>

復(fù)制代碼代碼如下:

<body>

        <div id="div1">

        </div>

    </body>

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

復(fù)制代碼代碼如下:

<script type="text/javascript">

            setInterval(function(){

                var oDiv=document.getElementById("div1");

                oDiv.style.width=oDiv.offsetWidth-1+'px';

            },30);

        </script>

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

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

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

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

復(fù)制代碼代碼如下:

<style type="text/css">

            #div1 {

                width: 200px;

                height: 200px;

                background: red;

                border: 1px solid #CCCCFF;

            }

        </style>

此時在運行代碼，發(fā)現(xiàn)div 居然往右邊慢慢增大。。。image BUG 驚現(xiàn)。。。。明明是減1 為什么會出現(xiàn)這種情況。

讓我們想想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

當(dāng)再次執(zhí)行這句話的時候 div的寬度是 201px; 這樣的話，每次都會增加1px，反而慢慢變大了。這就是offset 的bug 。

怎么解決這個問題呢？

其實不用這個offsetWidth 就可以了。我們用 width ?。?寫個函數(shù)直接獲取 css樣式中width 即可

獲取不在行間中的樣式：

復(fù)制代碼代碼如下:

function getStyle(obj, name) {

                if (obj.currentStyle) {

                    return obj.currentStyle[name];

                } else {

                    return getComputedStyle(obj, null)[name];

                }

            }

那么我們在修改下原來的代碼：

復(fù)制代碼代碼如下:

<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>

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

您可能感興趣的文章: