Question

我正在尝试创建一个javascript函数（onmouseover）将元素的高度和宽度增加10px（使用setTimeout增加10倍的1px），但我的元素增加了200px的高度和100px的宽度。这没有任何意义。关于它如何无法正常工作的示例：www.modwebsolutions.com/test3/我的源代码：

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";

这次只增加50px到高度，仍然是100px到宽度...而不是单程10px。

更新：似乎我将不得不回答我自己的问题，我仍然不确定，但我认为这与在setTimeout之前运行的迭代和搞乱一切有关。不幸的是，似乎setTimeout只能在递归函数中正常工作。

UPDATE2：递归方法也不起作用......总是死路一条。

Answer 1

可能是因为tempWidth和tempHeight被视为你应该尝试的字符串......

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

Answer 2

将功能更改为： -

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，无法正确呈现！

干杯

Answer 3

从类似的问题来看，代替 tempHeight +“px”; 尝试 tempHeight +“pxpx”;

虽然没有任何意义且没有记录，但我发现这可以使用style.height属性在IE10以及Firefox，Chrome和Opera中正确的高度。 IE早期版本没有经过测试。它必须是数据类型问题。

javascript更改元素大小无法正常工作

3 个答案: