javascript - 尝试通过随机定位加载多个元素

Question

所以我还不是很擅长 JS，但我发现这个代码块完全可以满足我的需要 - 获取一个元素并使其位置随机。问题是这仅在我使用 getElementById 时有效，但我想用大约 12 个不同的元素来执行此操作，而不仅仅是一个。

我试过给他们所有相同的类并使用 getElementsByClassName，我试过使用 querySelector，我试过 querySelectorAll - With这些示例中的每一个代码要么不起作用，要么仅适用于第一个元素。

标记:

<div id="1" class="rando">
     <img src="someIMG" alt="logo" itemprop="image">
</div>

<div id="2" class="rando">
    <iframe width="200" height="250" src="someURL" frameborder="0" ></iframe>
</div>

JS:

function getRandomPosition(element) {
    var x = document.body.offsetHeight-element.clientHeight;
    var y = document.body.offsetWidth-element.clientWidth;
    var randomX = Math.floor(Math.random()*x);
    var randomY = Math.floor(Math.random()*y);
    return [randomX,randomY];
}

window.onload = function() {
    var rpos = document.getElementsByClassName("rando");
    rpos.setAttribute("style", "position:absolute;");
    document.body.appendChild(rpos);
    var xy = getRandomPosition(rpos);
    rpos.style.top = xy[0] + 'px';
    rpos.style.left = xy[1] + 'px';
}

我也试过将它们放在一个循环中，但这也不起作用:

function getRandomPosition(element) {
    var x = document.body.offsetHeight-element.clientHeight;
    var y = document.body.offsetWidth-element.clientWidth;
    var randomX = Math.floor(Math.random()*x);
    var randomY = Math.floor(Math.random()*y);
    return [randomX,randomY];
}

window.onload = function() {
    var rpos = document.querySelector("#1, #2");
    for (var i = 0; i < rpos.length; i++) {
        rpos.setAttribute("style", "position:absolute;");
        document.body.appendChild(rpos);
        var xy = getRandomPosition(rpos);
        rpos.style.top = xy[0] + 'px';
        rpos.style.left = xy[1] + 'px';
    }
}

我们一如既往地非常感谢任何帮助/指导!

谢谢!

Answer 1

你几乎成功了。在您的 for 循环中，您对整个 HTMLCollection rpos 进行操作，而不是对每个单独的元素进行操作。例如，这行 rpos.setAttribute("style", "position:absolute;"); 所做的是为此元素集合运行 setAttribute，而不是 对于这个集合中的每个元素，我们应该运行 setAttribute。稍作调整即可得到:

function getRandomPosition(element) {
  var x = document.body.offsetHeight - element.clientHeight;
  var y = document.body.offsetWidth - element.clientWidth;
  var randomX = Math.floor(Math.random() * x);
  var randomY = Math.floor(Math.random() * y);
  return [randomX, randomY];
}

window.onload = function() {
  const rpos = document.getElementsByClassName("rando");
  for (let rpo of rpos) {
    rpo.setAttribute("style", "position:absolute;");
    document.body.appendChild(rpo);
    var xy = getRandomPosition(rpo);
    rpo.style.top = xy[0] + "px";
    rpo.style.left = xy[1] + "px";
  }
};

<div id="1" class="rando">
     <img src="someIMG" alt="logo" itemprop="image">
</div>

<div id="2" class="rando">
    <iframe width="200" height="250" src="someURL" frameborder="0" ></iframe>
</div>

<p class="rando">Test A</p>
<p class="rando">Test B</p>
<p class="rando">Test C</p>