javascript - 我无法将 div 放置在随机位置

Question

我试图随机放置一个 div，但出现类型错误。它说该元素未定义，但我认为我是用第 1 行的 const 行定义它的。在我的 CSS 文件中，div 的位置是绝对的，并且有一个背景图像集。我可以在 console.log 中得知我正在获得我想要的随机数。我只是在将这些坐标附加到 div 时遇到了一些麻烦。

const animal = document.querySelectorAll('.animal');

function getRandomPos(animal) {
    var x = screen.width;
    var y = screen.height;
    var randomX = Math.floor(Math.random() * x);
    var randomY = Math.floor(Math.random() * y);
    console.log(randomX, randomY);

    let rect = animal.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);

    animal.style.left = randomX;
    animal.style.top = randomY;
}

Answer 1

评论中已经解决了一个主要问题 - querySelectorAll 返回 HTMLCollection 而不是单个元素，因此您需要 querySelector。 此外，您还需要在设置元素样式的行中添加“px”单位(见下文)。

更新

提问者提到有多个随机移动的元素，因此我添加了一个示例，其中包括如何使用 ID 作为 setRandomPos 函数的参数来完成此操作。

function setRandomPos(target) {
  const element = document.getElementById(target);
  // var x = screen.width;
  var x = 400; // Just smaller numbers for the example
  // var y = screen.height;
  var y = 200;
  var randomX = Math.floor(Math.random() * x);
  var randomY = Math.floor(Math.random() * y);

  // Remember to add px for units
  element.style.left = randomX + 'px';
  element.style.top = randomY + 'px';
}

.randMove {
  position: fixed;
}

button {
  font-size: 20px;
  z-index: 1;
  position: relative;
}

<div id="animal" class="randMove">
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e7/Animal_%28Muppet%29.jpg/220px-Animal_%28Muppet%29.jpg" alt="Animal">
</div>

<div id="grover" class="randMove">
  <img src="https://vignette.wikia.nocookie.net/muppet/images/f/f7/GroverFullFigure2.png/revision/latest?cb=20190222025220" alt="Grover">
</div>

<button onClick="setRandomPos('animal')">Move Animal</button>
<button onClick="setRandomPos('grover')">Move Grover</button>