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

2019-11-20 13:36:50

字體：大中小

供稿：網(wǎng)友

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

<style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                
            }
        </style>

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

<body>
        <div id="div1">
            
        </div>
    </body>

以下是用來(lái)測(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)行一下沒(méi)有任何問(wèn)題，如愿的div在慢慢變小。

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

下面我們動(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 。

那么，我們說(shuō)回來(lái)，運(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è)問(wèn)題呢？

其實(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è)谛薷南略瓉?lái)的代碼：

復(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ì)有任何問(wèn)題了。

上一篇：Javascript 多物體運(yùn)動(dòng)的實(shí)現(xiàn)

下一篇：jQuery中height()方法用法實(shí)例