为width属性增加值异常：预期每次+1px实际+20-30px

你遇到的问题是因为getAttribute("width")返回的是字符串类型，直接和数字1相加时会执行字符串拼接而非数值加法。比如初始宽度是"50"，第一次计算后变成"501"，第二次变成"5011"，浏览器解析这个超大的字符串宽度时会自动缩放到合理范围，看起来就像是每次增加了几十像素。

需要把获取到的宽度值转换为数值类型后再进行加法运算，推荐用parseInt()或者Number()转换：

修正后的代码 #

<img id="testimage" src="wall.png" width="50" height="25"/>

setInterval(function() {
    var im = document.getElementById("testimage");
    // 将字符串宽度转为数值类型
    var currentWidth = parseInt(im.getAttribute("width")) || 0;
    var newWidth = currentWidth + 1;
    im.setAttribute("width", newWidth);
    // 打印数值验证变化
    console.log(newWidth);
}, 200);

更简洁的写法（直接操作DOM元素属性） #

DOM元素本身的width属性会直接返回数值，不需要额外转换：

setInterval(function() {
    var im = document.getElementById("testimage");
    im.width += 1;
    console.log(im.width);
}, 200);

内容的提问来源于stack exchange，提问作者samuraiskiy