我們先來(lái)看看這個(gè)bug 是怎么產(chǎn)生的。
代碼如下:
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
代碼如下:
<body>
<div id="div1">
</div>
</body>
以下是用來(lái)測(cè)試的Javascript代碼 ，目的是 讓div慢慢變窄。
代碼如下:
<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;
代碼如下:
<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)剛開(kāi)始的時(shí)候，實(shí)際上div 的寬度是200px 那么offsetWidth 是202
這個(gè)時(shí)候 oDiv.style.width=oDiv.offsetWidth-1+'px'; 這句話(huà)就是等于 oDiv.style.width=202-1=201px; 然后在賦值給width
當(dāng)再次執(zhí)行這句話(huà)的時(shí)候 div的寬度是 201px; 這樣的話(huà)，每次都會(huì)增加1px，反而慢慢變大了。 這就是offset 的bug 。
怎么解決這個(gè)問(wèn)題呢？
其實(shí)不用這個(gè)offsetWidth 就可以了 。 我們用 width ！！ 寫(xiě)個(gè)函數(shù)直接獲取 css樣式中width 即可
獲取不在行間中的樣式 ：
代碼如下:
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, null)[name];
}
}
那么我們?cè)谛薷南略瓉?lái)的代碼：
代碼如下:
<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)題了。
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：