获取页面元素的位置：掌握浏览器的兼容性

基于虚拟 DOM 数据驱动的思想，最不提倡的就是 jquery 时代的 DOM 操作！但是在目前一些复杂的页面中经常还是会用 javascript 处理一些 DOM 元素，实现一些动态效果；最常见的是用到一些元素的位置和尺寸的计算，但是其中浏览器的兼容性问题也是不可忽略的一部分…

基于偏移量的定位

偏移量定位是 CSS 中最基本的定位方式，使用 top 和 left 来指定元素相对其父元素的位置。在 JavaScript 中，可以通过 offsetLeft 和 offsetTop 属性来获取元素的偏移量。

const element = document.getElementById('element');
const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;

偏移量定位的兼容性很好，在所有主流浏览器中都支持。但是，偏移量定位有一个缺点，就是它不考虑元素的边框和内边距。

基于边框框的定位

边框框定位是 CSS 中另一种定位方式，使用 left 和 top 来指定元素相对其边框框的位置。在 JavaScript 中，可以通过 getBoundingClientRect() 方法来获取元素的边框框。

const element = document.getElementById('element');
const boundingRect = element.getBoundingClientRect();
const left = boundingRect.left;
const top = boundingRect.top;

边框框定位的兼容性也很好，在所有主流浏览器中都支持。边框框定位的一个优点是，它考虑了元素的边框和内边距。

基于客户端矩形的定位

客户端矩形定位是 CSS 中最新的一种定位方式，使用 left 和 top 来指定元素相对其客户端矩形的位置。在 JavaScript 中，可以通过 getClientRects() 方法来获取元素的客户端矩形。

const element = document.getElementById('element');
const clientRects = element.getClientRects();
const left = clientRects[0].left;
const top = clientRects[0].top;

客户端矩形定位的兼容性最好，在所有主流浏览器中都支持。客户端矩形定位的一个优点是，它考虑了元素的边框、内边距和滚动条。

兼容性问题

在使用上述方法获取元素的位置和尺寸时，需要注意以下兼容性问题：

• 在 IE 8 及更早的版本中，getBoundingClientRect() 方法不支持。
• 在 IE 9 及更早的版本中，getClientRects() 方法不支持。
• 在一些旧版本的浏览器中，offsetLeft 和 offsetTop 属性可能不准确。

为了解决这些兼容性问题，可以使用一些库来帮助你获取元素的位置和尺寸。例如，你可以使用 jQuery 库中的 position() 方法。

const element = $('#element');
const position = element.position();
const left = position.left;
const top = position.top;

总结

在 JavaScript 中获取页面元素的位置和尺寸有几种方法，包括基于偏移量的定位、基于边框框的定位和基于客户端矩形的定位。这些方法都有各自的优点和缺点，在使用时需要注意兼容性问题。