Question

DomRect的结果会返回{top: 10, right: 20, bottom: 30, left: 10, width: 10}类型的特殊对象（或显然为Object.keys）

它的结构类似于ClientRect

不幸的是，这个对象的行为与其他对象不同。

例如，在其上使用var obj = {} for (key in rect) { obj[key] = rect[key] }会返回一个空数组（我认为因为{{1}}属性不是可枚举的

我发现了一种转换为普通对象的肮脏方式：

{{1}}

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

Answer 1

让我们不要过于复杂化！

function getBoundingClientRect(element) {
  const 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()))

Answer 5

功能性ES6变体：

const propValueSet = (prop) => (value) => (obj) => ({...obj, [prop]: value})
const toObj = keys => obj => keys.reduce((o, k) => propValueSet(k)(obj[k])(o), {})
const getBoundingClientRect = el => toObj(['top', 'right', 'bottom', 'left', 'width', 'height', 'x', 'y'])(el.getBoundingClientRect())

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

5 个答案: