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更改元素大小不能正常工作

回答

相关问题