Question

我要在页面上的随机位置加载一系列元素。问题是我的js仅将其他所有元素随机化。我已经在网上看到了一些问题/答案，但是还没能解决如何解决我的问题（有点菜鸟）。

标记：

<div id="a" class="rando ui-widget-content">
    <iframe width="200" height="250" src="someURL" frameborder="0" ></iframe>
</div>

<div id="b" class="rando ui-widget-content">
    <img src="someURL" alt="someURL" itemprop="image">
</div>

<div id="c" class="rando ui-widget-content">
    <a href="someURL" title="someURL" target="_blank"><canvas id="someCanvas"></canvas></a>
</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);
  var randomZ = Math.floor(Math.random() * 256);
  return [randomX,randomY,randomZ];
}

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";
    rpo.style.zIndex = xy[2];
  }
};

一如既往，非常感谢您找出如何击中数组中每个元素的帮助或方向！

JavaScript仅影响数组中的所有其他元素

0 个答案: