Javascript 如何在我单击的位置添加动态div

我想对我的项目进行图像缩放效果。当用户单击该图像时，我希望图像能够缩放。但问题是，我动态创建的div被附加到主体的顶部，我想要的是将这个div附加到该图像的上方。 我试着这样做：-

export const imagezoom = () => {
  const image = document.querySelectorAll(".zoom");
  image.forEach((e) => {
    e.addEventListener("click", zoom);
  });
};

function zoom(event) {
  const div = document.createElement("div");
  const container = document.querySelector("body");
  div.classList.add("zoomDiv");
  const img = document.createElement("img");
  img.src = this.src;
  img.classList.add("zoomImage");
  console.log("added");
  div.appendChild(img);
  container.appendChild(div);
}

以下是您要做的

将图像放在一个div中。确保图像使用了包含div的所有空间。 将该div的位置设置为“相对”

使用

var x=evt.pageX-$（“#元素”）.offset（）.left；
var y=evt.pageY-$（'#element'）.offset（）.top；

获取鼠标相对于放置图像的div容器的位置。确保动态生成的图像位置为“绝对”

---

使用

x

和

y

动态设置

left

和

top

CSS属性。

我可能不知道您想做什么，但根据这个标题，如何在单击的位置添加动态div，请尝试以下操作。 在要缩放的可单击图像上添加一些JavaScript

例子 如果你已经在CSS中设置了上述属性，那么首先添加

position:absolute

并添加以下内容，其中

--y

表示

顶部

，而

--x

表示

左侧

.clickable_image {
    position: absolute;
    top: var(--y);
    left: var(--x);
}

---

上面将把

div

定位到您单击的位置

这个元素是什么？我没拿到那是你把照片放进去的那个部门的身份证。

   <img class="zoom" src="../../../assets/Subject/physics/8.png" alt="" />

var x = document.querySelector('clickable_image');
x.addEventListener('click', e => {
    image.style.setProperty('--x',e.clientX + 'px');
    image.style.setProperty('--y',e.clientY + 'px');
});

.clickable_image {
    position: absolute;
    top: var(--y);
    left: var(--x);
}