使用原始javascript为容器内的每个div设置随机位置

Question

这是我到目前为止所做的，但无法实现将其定位在主容器中每个div的随机位置上的目标。

有一个创建100个div的构造函数，然后将div存储在divs_array中。

我正在尝试将属性分配给divs_array中的每个div，但我只是收到控制台错误

未捕获的TypeError：无法设置未定义的属性'top'

const container = document.getElementById("container");

function Div() {

    this.element = document.createElement( 'div' ); 
    this.element.addEventListener( 'click', this );
    this.element.innerHTML = "I'm a div";
    // Styling divs
    this.element.style.width = "50px";
    this.element.style.height = "50px";
    this.element.style.top = "0";
    this.element.style.left = "0";
}

Div.prototype.handleEvent = function( event ) {  
    console.log( "clicked div ");
}

var divs_array = [];


for (var i = 0; i < 100; i++) {    
    var new_div = new Div();
    container.appendChild( new_div.element );
    divs_array.push(new_div);

}

console.log(divs_array);

function getRandomPosition(element) { 
    console.log("/////");
    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];
}

for (var i = 0; i < divs_array.length; i++) {
    console.log("****");
    var xy = getRandomPosition(divs_array[i]);
    divs_array[i].style.top = xy[0] + 'px';
    divs_array[i].style.left = xy[1] + 'px';

}

Answer 1

divs_array由Div组成，它们不具有style属性。应该是

divs_array[i].element.style.top = xy[0] + 'px';
divs_array[i].element.style.left = xy[1] + 'px';

顺便说一句，没有理由将元素传递给getRandomPosition函数，因为您没有触摸其中的元素。