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

时间:2011-04-30 16:25:42

标签: javascript

我正在尝试创建一个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:递归方法也不起作用......总是死路一条。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

将功能更改为: -

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,无法正确呈现!

干杯

答案 2 :(得分:0)

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

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