使用 JavaScript 设置元素的位置

作者

目录

Set the Position of an Element using JavaScript

  1. 设置元素的位置
  2. 单击时将元素置于鼠标下方

使用 JavaScript 设置元素的位置

设置元素的位置：

  1. 选择该元素并将其位置属性设置为absolute。
  2. 使用该top属性设置元素的垂直位置，例如
    box.style.top = '150px'.
  3. 使用该left属性设置元素的水平位置，例如
    box.style.left = '150px'.

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box" style="background-color: salmon; width: 100px; height: 100px">
      Box 1
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

box.style.position = 'absolute';

box.style.top = '150px';
box.style.left = '150px';

console.log(box.style.top); // 👉️ "150px"
console.log(box.style.left); // 👉️ "150px"

设置元素位置

我们首先将元素的
位置设置为
absolute。

当元素定位为absolute时，它会从正常的文档流中移除。

元素的最终位置由top、right和
属性bottom的值确定。left

、top和属性对非定位元素没有影响right。bottomleft

我们将元素的top
CSS 属性设置为150px，它指定到元素包含块的上边缘的距离。

然后我们使用left
属性设置到元素包含块左边缘的距离。

如果您必须在代码中的多个不同位置设置元素的位置，请创建一个可重用的函数。
索引.js
function positionElement(el, x, y) {
  el.style.position = 'absolute';
  el.style.left = x + 'px';
  el.style.top = y + 'px';
}

const box = document.getElementById('box');
console.log(positionElement(box, 50, 150));

console.log(box.style.left); // 👉️ "50px"
console.log(box.style.top); // 👉️ "150px"

该函数将元素、x和y位置作为参数，将元素的position属性设置为absolute并对其进行定位。

单击时将元素置于鼠标下方

要在单击时将元素定位在鼠标下方：

  1. 将元素的position属性设置为absolute。
  2. 向对象添加click事件侦听器document。
  3. 每次单击鼠标时，将元素的top和left属性设置为鼠标的坐标。

这是下一个示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box" style="background-color: salmon; width: 100px; height: 100px">
      Box 1
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');
box.style.position = 'absolute';

document.addEventListener('click', function handleClick(event) {
  box.style.top = event.clientY - 50 + 'px';
  box.style.left = event.clientX - 50 + 'px';
});

单击鼠标下的位置元素

If you open your browser and click at different places on the screen, you will see that the element gets positioned under your mouse cursor.

We added a click event listener on the document object, which invokes a
function anytime the document is clicked.

We then used the event object to get the coordinates of the mouse when the event is dispatched.

Your requirements may vary, but to position the element in the center of the
cursor, we subtracted 50 from the
clientY
and
clientX
coordinates.

The clientY property provides the vertical coordinate at which the event
occurred.

And the clientX property provides the horizontal coordinate at which the
MouseEvent event occurred.

–