javascript - 在我单击图像的位置创建一个带有文本的 div

Question

我有一个 HTML 格式的图像，我希望用户用 HTML 格式输入一个输入，然后如果他单击该图像，它将创建一个彩色的 div，它写在 input 中，这个 div 的位置是基于用户点击的坐标(不居中，稍微偏上偏左)，现在我可以创建矩形 div，但我不知道如何将文本放入其中。

let listaAre = [];
let quantiClic = 0;

document.getElementById('blah').addEventListener('click', event => {
  document.getElementById('squareContaine').innerHTML =
    document.getElementById('squareContaine').innerHTML +
    '<div id="squar' + quantiClic + '" style="background-color: blue; height: 50px; width: 50px; position: absolute;"></div>';
  document.getElementById('squar' + quantiClic).style.top = (event.pageY - Number(document.getElementById('dimensione').value) / 2) + 'px';
  document.getElementById('squar' + quantiClic).style.left = (event.pageX - Number(document.getElementById('dimensione').value) / 2) + 'px';
  document.getElementById('squar' + quantiClic).style.width = Number(document.getElementById('dimensione').value)/4 + 'px';
  document.getElementById('squar' + quantiClic).style.height = Number(document.getElementById('dimensione').value)/10 + 'px';
  document.getElementById('squar' + quantiClic).style.background =(document.getElementById('colorebordo').value);

  listaAre.push({
    x: (event.offsetX - Number(document.getElementById('dimensione').value) / 2),
    y: (event.offsetY - Number(document.getElementById('dimensione').value) / 2),
    width: Number(document.getElementById('dimensione').value),
    height: Number(document.getElementById('dimensione').value),
    background:(document.getElementById('colorebordo').value)
  });
  document.getElementById('squar' + quantiClic).addEventListener('click',       function (e) {
    this.style.display = 'none';
  });
  quantiClic = quantiClic + 1;
});

article, aside, figure, footer, header,
hgroup, menu, nav, section { display: block; }
.fasciaalta {
  position: fixed;
  background-color: white;
}

<div class="fasciaalta">
  <input type="color" id="colorebordo">
  <input type="text" id="nome">
  <input type="number" id="dimensione" value="200">
  <hr size="2px" color="blue" width="100">
</div>

<img id="blah" src="montagna.jpg" alt="your image" />
<div id="squareContaine"></div>

<div id="previewImage"></div>

Answer 1

您可以通过访问事件对象的 clientX 和 clientY 属性来获取事件单击时鼠标的坐标。然后你只需告诉新元素将它们用作顶部和左侧样式来定位它。

片段

document.getElementById('blah').addEventListener('click', function(event) {
  var div = document.createElement("DIV"); // Create a <div> element
  var t = document.createTextNode("HELLO");// Create a text node
  div.appendChild(t);                      // Append the text to <div>

  document.body.appendChild(div);          //Add <div> to document
  div.style.position = 'absolute';         //Make its position absolute

  //Set the coordinates
  div.style.left = event.clientX + "px";
  div.style.top  = event.clientY + "px";
})

<div>
<img id="blah" src="http://img1.wikia.nocookie.net/__cb6/nyancat/images/5/50/Wiki-background" alt="your image" />
</div>

额外

如果您不想创建新的 div，而是想使用一个简单地使用 getElementById 访问该元素并更改其属性的方法。我已使该示例尽可能简单，以便它不仅适用于您的案例，而且适用于任何其他试图解决他们问题的人。