JavaScript无法将变量注入元素style的top/left属性问题排查

你的代码问题出在这行：

let arr = [".top", ".left"];

数组里的属性名多了多余的点号！DOM元素的style对象属性名是不带点的，应该写成["top", "left"]。

你现在用e.target.style[arr[i]]相当于试图访问style[".top"]，这不是合法的CSS样式属性名，所以赋值根本不会生效。而控制台能正常打印数值，是因为你把值存到了logTest数组里，和style的赋值操作无关。

修正后的完整代码：

let arr = ["top", "left"];
let logTest = []

document.querySelectorAll('div').forEach(occurence => {
  occurence.addEventListener('mouseover', (e) => {
    for (let i = 0; i < 2; i++) {
      var num = Math.floor((Math.random() * 100) + 1);
      e.target.style[arr[i]] = num + "px";
      logTest[i] = num + "px";
    }
    console.log(logTest[0] + ", " + logTest[1]);
  });
});

另外补充一个常见坑：要确保你的div元素设置了定位属性（比如position: relative/absolute/fixed），否则top和left样式不会起作用，这是CSS的基础规则，和JS代码无关。

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