getcomputedstyle 对象 javascript 问题

Question

我遇到了 getComputedStyle 方法的问题。 我试图在单击时获取元素的 left 和 top 属性。

我能够访问 'left' 属性，但 'top' 属性返回一个对象而不是字符串。

我遍历元素数组，附加两个事件侦听器。 单击事件触发后，当我按下目标 div 上的 keydown 时，我可以从左向右移动，但向上/向下没有任何作用。 top 的样式返回 window 对象。

我还在代码的前面部分定义了 left 和 top css 声明。

任何帮助将不胜感激！

Object.keys(source_boxes).forEach(function(key){

        source_boxes[key].addEventListener('click',function(){
            clicked = true;
            elem = source_boxes[key];
        });

        document.addEventListener('keydown',function(e){
            e.preventDefault();
            if(clicked == true){
                css = getComputedStyle(elem);

                top =parseInt(css['top']);
                left =parseInt(css['left']);

                if(e.code ==="ArrowUp"){
                    top = top -5;
                    elem.style.top = top +'px';
                }else if(e.code ==="ArrowDown"){
                    top = top +5;
                    elem.style.top = top +'px';
                }else if(e.code ==="ArrowLeft"){
                    left = left -5;
                    elem.style.left = left +'px';
                }else if(e.code ==="ArrowRight"){
                    left = left +5;
                    elem.style.left = left +'px';
                }
            }



        });
    });

Answer 1

没有var 、 const或let关键字的top将映射到隐式全局window.top ，它已经在浏览器中使用并且无法设置。