javascript - 将元素放置在随机位置

Question

我正在尝试使用此代码将元素放置在随机位置，但它只是将元素放置在容器元素的顶部。我究竟做错了什么？

   create: function(){

    console.log("cone created");

    var el =  document.createElement('div');
    el.classList.add('cone');

    this.container.appendChild(el);

    this.el = el;

    this.x = Math.random () * canvas.innerWidth + 'px';
    this.y = Math.random () * canvas.innerHeight + 'px';

    },

Answer 1

我假设“画布”不是真正的画布，它只是一个<div>.

在这种情况下，您需要做几件事：

• 确保您的容器有position:relative
• 确保您的容器的孩子有position:absolute
• 添加el.style.left = this.x; el.style.top = this.y;以实际定位元素

Answer 2

也许div使用内联 css 插入可以处理这个问题。

我写了一个示例：

$(document).ready(function() {
  var sqrPixel = 10;

  var posX = 30;
  var posY = 100;

  $('body').append('<div style="background: #ccc; box-shadow: 2px 2px 2px #000; position: absolute; width: ' + sqrPixel + 'px; height: ' + sqrPixel + 'px; left: ' + posX + '; top: ' + posY + ';"></div>');
});

我将正方形附加到body. 如果你想改变它。您可以设置posX和posY随机。

我知道它看起来有点乱，但至少它对我有用。