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
當(dāng)再次執(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的屬性總結(jié)
- JavaScript中的getTimezoneOffset()方法使用詳解
- js實現(xiàn)jquery的offset()方法實例
- javascript中style.left和offsetLeft的用法說明
- JS OffsetParent屬性深入解析
- JS小功能(offsetLeft實現(xiàn)圖片滾動效果)實例代碼
- JS中offset和勻速動畫詳解
相關(guān)文章
最近在學(xué)習(xí)webpack，本文主要介紹了loader插件的調(diào)試方法，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要給大家分享了24個實用JavaScript?的開發(fā)技巧，文章圍繞JavaScript?的開發(fā)技巧講解展開全文，具有一定的參考價值,需要的朋友可以參考一下，希望對你有所幫助2021-12-12
這篇文章主要介紹了微信小程序獲取音頻時長與實時獲取播放進度,文中給大家通過一個例子介紹了微信小程序音頻長度獲取的問題，感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
javascript網(wǎng)頁關(guān)鍵字高亮代碼
非常不錯的關(guān)鍵字高亮代碼，用js實現(xiàn)，這個方法不錯2008-07-07
js防抖函數(shù)和節(jié)流函數(shù)使用場景和實現(xiàn)區(qū)別示例分析
這篇文章主要介紹了js防抖函數(shù)和節(jié)流函數(shù)使用場景和實現(xiàn)區(qū)別,結(jié)合實例形式詳細(xì)分析了js防抖函數(shù)和節(jié)流函數(shù)基本功能、定義、用法區(qū)別及操作注意事項,需要的朋友可以參考下2020-04-04
javascript table美化鼠標(biāo)滑動單元格變色
效果非常不錯的table美化，當(dāng)鼠標(biāo)滑過去，背景色變換效果2008-06-06
創(chuàng)建一個新的用戶對象，接受一個有許多屬性的對象作為參數(shù)2009-12-12
微信jssdk踩坑之簽名錯誤invalid signature
這篇文章主要介紹了微信jssdk踩坑之簽名錯誤invalid signature，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了HTML5實現(xiàn)拖拉上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JavaScript實現(xiàn)隨機點名小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10