Javascript 運動中Offset的bug解決方案
我們先來看看這個bug 是怎么產(chǎn)生的。
<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又是怎么來的呢？
下面我們動動樣式 就會神奇的事情發(fā)生了。。。
我們給div1 加個樣式 border: 1px solid #CCCCFF;
<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
當再次執(zhí)行這句話的時候 div的寬度是 201px; 這樣的話，每次都會增加1px，反而慢慢變大了。 這就是offset 的bug 。
怎么解決這個問題呢？
其實不用這個offsetWidth 就可以了 。 我們用 width ?。?寫個函數(shù)直接獲取 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>
這樣程序運行就不會有任何問題了。
- 基于js中style.width與offsetWidth的區(qū)別(詳解)
- js獲取元素的偏移量offset簡單方法(必看)
- 詳解原生js實現(xiàn)offset方法
- JavaScript中offsetWidth的bug及解決方法
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- javascript中offset、client、scroll的屬性總結
- JavaScript中的getTimezoneOffset()方法使用詳解
- js實現(xiàn)jquery的offset()方法實例
- javascript中style.left和offsetLeft的用法說明
- JS OffsetParent屬性深入解析
- JS小功能(offsetLeft實現(xiàn)圖片滾動效果)實例代碼
- JS中offset和勻速動畫詳解
相關文章
javascript實現(xiàn)一個數(shù)值加法函數(shù)
這篇文章主要介紹了javascript實現(xiàn)一個數(shù)值加法函數(shù)，十分的簡單實用，方便大家理解javascript，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要介紹了JS如何循環(huán)遍歷JSON數(shù)據(jù)的方法,本文提供了 JS 循環(huán) JSON 數(shù)據(jù)列,以及 JS 循環(huán)遍歷 JSON 數(shù)據(jù)的例子,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了深入學習JS?XML和Fetch請求，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
TextArea設置MaxLength屬性最大輸入值的js代碼
TextArea中限制最大輸入長度,實現(xiàn)的方法種種，我們不在一一介紹，今天本文推薦一種簡單實用的方法，需要的朋友可以參考下2012-12-12
下面小編就為大家?guī)硪黄狫S獲取和修改元素樣式的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
今天與同事一起看了一個javscript定義函數(shù)問題，如何在定義一個函數(shù)里給參數(shù)一個默認值.2011-07-07
javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js，而且每遇到選項卡就加一點js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個通用簡潔的選項卡庫。2010-05-05
flash導航條在網(wǎng)站建設中應用比較廣泛，此種效果給瀏覽者帶來極好的視覺效果，非常棒，下面小編給大家介紹基于JS實現(xiàn)導航條flash導航條，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要為大家詳細介紹了MUI實現(xiàn)上拉加載和下拉刷新效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較
這篇文章主要介紹了promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較，在es6中引入的原生Promise為js的異步回調問題帶來了一個新的解決方式co模塊搭配Generator函數(shù)的同步寫法，更是將js的異步回調帶了更優(yōu)雅的寫法。感興趣的小伙伴們可以參考一下2018-05-05