無法使用 Javascript 將變量注入樣式邊距

Question

這個問題的解決方案相當簡單，我很確定，但我目前仍然無法找到問題所在（可能是一些語法）。

我正在嘗試創建一個簡單的 JS 練習，以在每次懸停/鼠標懸停后將對象的 position 移動到隨機位置。 （DOM 操作基礎）。

這是代碼：

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]);
  });
});

由於數字正在生成並正確打印到控制台，我相當確定問題必須在第 9 行，其中e.target.style[.left and.top]無法分配給隨機數。

Answer 1

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

不要使用“。” 用於指定樣式的點。 直接使用樣式屬性名。 用這個：

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

並確保將 position 設置為 div 元素的相對、絕對或固定。

這是使用您的腳本制作的工作示例：

<style>
  .t {
    height: 50px;
    width: 50px;
    background: green;
    margin: 10px;

    position: relative;
  }
</style>

<h1>Hello</h1>

<div class="t">e</div>
<div class="t">f</div>
<script>
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;
      logTest[i] = num;
    }
    console.log(logTest[0] + ", " + logTest[1]);
  });
});
</script>