获取dom元素那些讨厌的位置封装代码

获取DOM元素位置是Web开发中比较常见的操作，但是由于不同浏览器之间存在差异，所以封装获取DOM元素位置代码时需要注意一些细节。在以下步骤中，我们将展示如何获取DOM元素的位置并将其封装到一个函数中。

1. 获取元素位置

• 文档坐标(client coordinate)：指相对于左上角(0, 0)位置的像素坐标，通过DOM节点的clientX和clientY属性获取
• 文档内位置(page coordinate)：指相对于文档左上角(0, 0)的像素坐标，通过DOM节点的getBoundingClientRect()方法获取

对于IE8及以下版本，需要使用document.documentElement.scrollTop和document.documentElement.scrollLeft属性获取页面滚动距离

2. 封装代码

function getElementPosition(element) {
  let clientRect = element.getBoundingClientRect();
  let scrollTop = document.documentElement.scrollTop;
  let scrollLeft = document.documentElement.scrollLeft;
  return {
    x: clientRect.left + scrollLeft,
    y: clientRect.top + scrollTop
  };
}

上述代码定义了一个名为getElementPosition的函数，用于获取DOM元素相对于页面左上角的坐标位置。该函数需要传入一个DOM元素作为参数。

需要注意的是，在IE8及以下版本中，需要使用document.documentElement.scrollTop和document.documentElement.scrollLeft属性获取页面滚动距离。

3. 示例

示例一

假设现在有一个DOM元素

<div id="box" style="width: 100px; height: 100px; position: absolute; top: 100px; left: 200px;"></div>

现在我们要获取该DOM元素相对于页面左上角的坐标位置，可以调用以下代码：

let box = document.getElementById('box');
let position = getElementPosition(box);
console.log(position); // { x: 200, y: 100 }

示例二

假设现在有一个DOM元素

<span id="text">Hello World!</span>

现在我们要获取该DOM元素相对于页面左上角的坐标位置，可以调用以下代码：

let text = document.getElementById('text');
let position = getElementPosition(text);
console.log(position); // { x: ..., y: ... }

通过封装的代码，我们可以非常方便地获取DOM元素相对于页面左上角的坐标位置并进行操作。