我正在尝试创建一个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:递归方法也不起作用......总是死路一条。
答案 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早期版本没有经过测试。它必须是数据类型问题。