javascript更改元素大小不能正常工作

我試圖創建一個javascript函數（onmouseover）將增加元素的高度和寬度10px（1px增加10倍與setTimeout），但相反，我的元素增加200px的高度和100px的寬度。這沒有任何意義。例如關於它是如何工作不正常：www.modwebsolutions.com/test3/我的源代碼：javascript更改元素大小不能正常工作

var el; 

function changeSize(id) { 

var elem=document.getElementById(id); 

el=elem; 

for (var i=0; i<10; i++) { 
    setTimeout(changeS,100); 
} 

} 

function changeS() { 
var tempHeight=el.offsetHeight; 
var tempWidth=el.offsetWidth; 
el.style.height=tempHeight + 1 +"px"; 
el.style.width=tempWidth + 1 + "px"; 
} 


// Update: tried 
    el.style.height=(parseInt(tempHeight) + 1) +"px"; 
    el.style.width=(parseInt(tempWidth) + 1) + "px";

這段時間只增加了50像素高度和仍然100px的寬度來代替...的10px的各種方式。

更新：似乎我將不得不回答我自己的問題，我仍然不確定，但我認爲它與在setTimeout之前運行的迭代有關，並且搞亂了所有內容。不幸的是，似乎setTimeout只能在遞歸函數中正常工作。

UPDATE2：遞歸方法不能正常工作......總死衚衕。

來源

2011-04-30 Caballero

可能是因爲tempWidth和tempHeight被trated爲字符串，你應該嘗試...

el.style.height= (parseInt(tempHeight) + 1) +"px"; 
el.style.width= (parseInt(tempWidth) + 1) + "px";

來源

2011-04-30 16:30:39

試過這符號的確切符號，但仍然不起作用... – Caballero 2011-04-30 16:37:50

@Caballero：檢查函數中的值。你確定價值正在增加這麼多的價值嗎？ – 2011-04-30 16:47:02

沒有價值增加太多，這就是造成整個問題的原因。我在每次迭代後都添加了「alert」，寬度值總是增加10px而不是1px。高度值增加5px而不是1px。這沒有任何意義，代碼是超級原始的。 – Caballero 2011-04-30 17:05:22

更改功能： -

function changeS() { 
var tempHeight=el.offsetHeight; 
var tempWidth=el.offsetWidth; 
el.style.height = (parseInt(tempHeight) + 1) +"px"; 
el.style.width = (parseInt(tempWidth) + 1) + "px"; 
}

希望這有助於，因爲我感覺的offsetHeight將返回*px這將導致樣式高度爲*pxpx，這將無法正確呈現！

乾杯

來源

2011-04-30 16:30:53

這沒有奏效。還是一樣。 – Caballero 2011-04-30 16:35:59

P.S. offsetHeight和offsetWidth返回整數。 – Caballero 2011-04-30 16:42:38

從一個類似的問題，代替 tempHeight + 「PX」; 嘗試 tempHeight +「pxpx」;

儘管它沒有任何意義，但沒有記錄，但我發現這可以通過style.height屬性來修正IE10以及Firefox，Chrome和Opera的正確高度。 IE早期版本未經測試。它必須是數據類型問題。

來源

2013-04-07 16:07:41 Laurence

javascript更改元素大小不能正常工作

回答

相關問題