如何最好地将ClientRect/DomRect转换为普通对象

Question

someElement.getBoundingClientRect()返回类型(或显然)的特殊对象的结果ClientRectDomRect

它的结构就像 {top: 10, right: 20, bottom: 30, left: 10, width: 10}

不幸的是,这个对象的行为与其他对象不同.

例如,使用Object.keys它返回一个空数组(我认为因为ClientRect属性不可枚举

我找到了一种转换为普通对象的脏方法:

var obj = {}
for (key in rect) {
  obj[key] = rect[key]
}

我的问题是,有更好的方法吗？

Answer 1

让我们不要过于复杂化!

function getBoundingClientRect(element) {
  var rect = element.getBoundingClientRect();
  return {
    top: rect.top,
    right: rect.right,
    bottom: rect.bottom,
    left: rect.left,
    width: rect.width,
    height: rect.height,
    x: rect.x,
    y: rect.y
  };
}

Answer 2

如果使用jQuery,可以使用extend方法.

var obj = $.extend( {}, element.getBoundingClientRect());

Answer 3

警告：非标准行为（不适用于Firefox < 62，包括 ESR 60 和可能除 Chrome 之外的其他浏览器）

var obj = el.getBoundingClientRect().toJSON();

Answer 4

这是我可以忍受的：

const persistRect = JSON.parse(JSON.stringify(someElement.getBoundingClientRect()))