如何在点击时创建div元素？ 而div适用于我点击的位置

Question

我正在尝试使用javascript单击创建一个div。我发现的所有代码都是使用主体中已经创建的div。但是我希望仅在单击时创建div，并且用户需要多次。

document.body.onclick = function () {
    var i;
    i = document.createElement('div');
    i.style.height = "10px";
    i.style.width = "10px";
    i.style.backgroundColor = "black";
    document.body.appendChild(i);
}

Answer 1

由于正文中没有内容，并且默认情况下没有为body设置区域，因此您无法单击body 。 因此，根本不会调用您的函数。 您可以为正文设置一些区域或使用window.onclick ：

 window.onclick = function (e) { var i, left = e.clientX, top = e.clientY; i = document.createElement('div'); i.style.left = left+ "px"; i.style.top = top+ "px"; i.style.position = "absolute"; i.style.height = "10px"; i.style.width = "10px"; i.style.backgroundColor = "black"; document.body.appendChild(i); } 

Answer 2

您的document.body.onclick函数将不起作用，这是因为主体中没有内容，并且默认情况下没有为主体设置区域 。

通过进行一些css更改，它可以工作，但是您可以使用window.onclick event以最简单的方式实现此目的。

要在鼠标单击位置上创建div ，您需要将div的位置设置为absolute ，并通过获取event.clientX和event.clientY来将其left和top设置为鼠标位置

 window.onclick = function (e) { var i; i = document.createElement('div'); i.style.height = "10px"; i.style.width = "10px"; i.style.backgroundColor = "black"; i.style.position = "absolute"; i.style.left = e.clientX+'px'; i.style.top = e.clientY+'px'; document.body.appendChild(i); } 

Answer 3

您可以修改CSS。 当没有任何初始内容时，主体的高度为0px ，因此这意味着您需要单击该零像素，这可能是不可能的。 通过设置主体的高度（在CSS中），我们可以单击它。

 document.body.onclick = function(e) { //console.log(e) let i = document.createElement('div'); i.style.height = "10px"; i.style.width = "10px"; i.style.backgroundColor = "black"; i.style.position = 'absolute'; i.style.top = e.clientY + 'px'; i.style.left = e.clientX + 'px'; document.body.appendChild(i); } 

 html, body { height: 100%; }