Javascript 運(yùn)動(dòng)中Offset的bug解決方案

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

這篇文章主要介紹了Javascript 運(yùn)動(dòng)中Offset的bug解決方案,需要的朋友可以參考下

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

<style type="text/css">

            #div1 {

                width: 200px;

                height: 200px;

                background: red;

            }

        </style>

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

<body>

        <div id="div1">

        </div>

    </body>

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

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

<script type="text/javascript">

            setInterval(function(){

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

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

            },30);

        </script>

Javascript 代碼很簡(jiǎn)單，運(yùn)行一下沒有任何問題，如愿的div在慢慢變小。

那這個(gè)offset 的bug又是怎么來的呢？

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

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

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

<style type="text/css">

            #div1 {

                width: 200px;

                height: 200px;

                background: red;

                border: 1px solid #CCCCFF;

            }

        </style>

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

讓我們想想offset 有什么特點(diǎn)：

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

那么，我們說回來，運(yùn)動(dòng)剛開始的時(shí)候，實(shí)際上div 的寬度是200px 那么offsetWidth 是202

這個(gè)時(shí)候 oDiv.style.width=oDiv.offsetWidth-1+'px'; 這句話就是等于 oDiv.style.width=202-1=201px; 然后在賦值給width

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

怎么解決這個(gè)問題呢？

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

獲取不在行間中的樣式：

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

function getStyle(obj, name) {

                if (obj.currentStyle) {

                    return obj.currentStyle[name];

                } else {

                    return getComputedStyle(obj, null)[name];

                }

            }

那么我們?cè)谛薷南略瓉淼拇a：

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

這樣程序運(yùn)行就不會(huì)有任何問題了。

您可能感興趣的文章: