javascript - getcompatedstyle 对象 javascript 问题

Question

我在使用 getComputedStyle 方法时遇到问题。我试图在单击时获取元素的左侧和顶部属性。

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

我循环遍历元素数组，附加两个事件监听器。单击事件触发后，当我按下目标 div 上的 keydown 时，我可以从左向右移动，但向上/向下不执行任何操作。 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 将映射到隐式全局 窗口.top，即already in use in browsers并且无法设置。