如何使用javascript找到div顶部中心的坐标？

Question

我有一个如下所示的 div，鉴于我使用 getBoundingClientRect() 方法具有顶部、左侧、底部、右侧、x、y 值，我如何获得该 div 的图像中的 (x1,y1) 和 (x2, y2) 坐标。我尝试过类似下面的方法，for x1, y1    return {x: (rect.left + rect.width / 2), y: rect.top + (rect.height / 2)};for  x2, y2    return {x: rect.right, y:rect.top + (rect.height / 2)};有人可以帮我解决这个问题。谢谢。

Answer 1

你可以这样做：

const circle1 = document.querySelector('#c1');

const circle2 = document.querySelector('#c2');

const box = document.querySelector('.box');

const rect = box.getBoundingClientRect();

const topCenter = {

  x: rect.x + rect.width/2,

  y: rect.y,

}

const centerRight = {

  x: rect.x + rect.width,

  y: rect.y + rect.height/2,

}

const circleRadius = 5;

circle1.style.left = `${topCenter.x - circleRadius}px`;

circle1.style.top = `${topCenter.y - circleRadius}px`;

circle2.style.left = `${centerRight.x - circleRadius}px`;

circle2.style.top = `${centerRight.y - circleRadius}px`;

* {

  padding: 0;

  margin: 0;

}

body {

  position: relative;

  width: 100vw;

  height: 100vh;

}

.box {

  --height: 100px;

  --width: 200px;

  position: absolute;

  left: calc((100% - var(--width)) / 2);

  top: calc((100% - var(--height)) / 2);

  width: var(--width);

  height: var(--height);

  border: 1px solid black;

}

.circle {

  position: absolute;

  border-radius: 50%;

  background: red;

  width: 10px;

  height: 10px;

}

<div class="circle" id="c1"></div>

<div class="circle" id="c2"></div>

<div class="box"></div>