浏览器Pong游戏开发中无法修改赋值给变量的HTML元素样式

问题根源 #

left、top CSS属性仅对非static定位的元素生效，HTML元素默认的定位模式是static，这种模式下浏览器会忽略left/top/right/bottom的偏移设置，这就是你修改属性不生效的核心原因。你可以打开浏览器开发者工具查看ball元素的样式面板，会发现你设置的left/top属性已经存在，但被标注为无效属性。

修复方案 #

常规Pong游戏中球会相对于游戏容器（也就是你代码里的grid元素）偏移，按如下修改即可：

1. 给父容器grid设置position: relative，作为子元素的定位参照物
2. 给ball元素设置position: absolute，开启偏移属性支持

修改后的完整可运行代码如下：

let grid = document.getElementById('grid');
let ball; 

function setup() {
    // 给游戏容器设置相对定位，作为子元素定位参照
    grid.style.position = 'relative';
    grid.innerHTML += '<div id="ball"></div>'; 
    ball = document.getElementById("ball");
    // 开启绝对定位，让left/top生效
    ball.style.position = 'absolute';
    ball.style.width = "10px";
    ball.style.height = "10px"; 
    // 补充背景色方便观测，可根据你的需求修改
    ball.style.backgroundColor = '#000';
}

function moveBall(x, y) {
    ball.style.left = x + "px"; 
    ball.style.top = y + "px"; 
}

setup();
moveBall(20, 20);

如果你的球需要相对于整个浏览器视口移动，不需要参照grid容器，直接给ball设置position: fixed即可，不需要修改grid的定位属性。

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