js修改元素位置的两个函数使用发生冲突？

Question

上代码

document.onkeydown= function (event)
{
    var e = event || window.event || arguments.callee.caller.arguments[0];
          if(e && e.keyCode==37){ // 按 Left 
            var obj=document.getElementById('items')//获取元素
            obj.style.background = "rgb(0, 255, 149,0.3)"//变色表示函数已使用
            obj.style.left+=(-100)+"px"//修改位置向左100px
            
            
                                }
         if(e && e.keyCode==39){ // 按Right
            var obj=document.getElementById('items') //获取元素

            obj.style.background = "rgb(149, 255, 0,0.3)"//变色表示函数已使用
            obj.style.left+=100+"px"//修改位置向右100px
             }            
       
} 

通过颜色变化，两个函数都是可用的。

如果只按Left，则元素会向左移动，变色。
但接着再按Right，则元素不移动，只变色。
只按Right也是可用的，再接Left也不移动。
为什呢？（已经设置过position，并且L/R单独使用是可用的）

Answer 1

obj.style.left 的值类型为字符串 String， 该类型值后面的 + 操作符视为字符串拼接符，操作符后面的数字会被转为字符串，然后进行拼接。
代码写成这样就可以解决问题：

    var style = obj.style,
        left = style.left;
    style.left = +left.match(/^d+/)[0] + 100 + 'px';

但是为什么单独按按钮的时候 left 会被正常修改，这一点用上面的理论没法解释。

Answer 2

解法楼上已经说了我这里不再赘诉。

至于为什么L/R单独使用是可用的还是因为你第一次获取obj.style.left的时候获取到的是空字符串即''

然后调用obj.style.left+=(-100)+"px"字符串拼接后就成了-100px，代码打了个擦边球刚好生效了，但是你再猜调用的时候就变成了-100px+-100px结果就成了-100px-100px这个样式自然是不生效的，最后造成的结果就是你说的L/R只能单独使用