Question

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

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

您的</body>功能不起作用。这是由于体内 没有内容 以及 没有区域设置为默认 。

通过进行一些(you can extend from Tomcat official image)更改，它可以工作您可以使用</table>作为最简单的方法来实现。

要在鼠标单击位置上创建document.body.onclick，您需要将div的位置设置为window.onclick event，并通过获取{将其div和absolute设置为鼠标位置{1}}和left

top

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%; }

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

3 个答案: