动态修改元素行内样式：为何ball.style['marginLeft']赋值变量未达预期？

首先说你两种代码效果不一致的核心原因：

• 第一种代码里，你给style属性拼接了px单位，最终生成的是合法的CSS声明margin-left: XXpx，浏览器能正确解析应用。
• 第二种代码直接给ball.style['marginLeft']赋值了纯数字bml-4，没有单位的数值对于margin-left这种需要长度单位的CSS属性来说是无效值，浏览器会直接忽略这个设置，自然没效果。

至于为什么网上示例都用"400px"这类带单位的字符串：
DOM元素的style对象对应的CSS属性（比如marginLeft、width这类长度相关属性），要求赋值必须是带单位的字符串，除非是少数不需要单位的属性（比如opacity、z-index）。你想要和第一种代码效果一致，第二种代码得改成这样：

ball.style['marginLeft'] = (bml - 4) + 'px';

另外补充个细节：你用parseInt(ball.style.marginLeft,10)能拿到数字，是因为ball.style.marginLeft本身是浏览器返回的带px的字符串（比如"20px"），parseInt帮你提取了数字部分，但赋值的时候必须把单位加回去，否则浏览器不认。

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