web-dev-qa-db-ja.com

ClientRect / DomRectをプレーンオブジェクトに変換する最善の方法

someElement.getBoundingClientRect()の結果は、タイプClientRectのspecialオブジェクトを返します（またはDomRectは明らかに）

{top: 10, right: 20, bottom: 30, left: 10, width: 10}

残念ながら、このオブジェクトは他のオブジェクトとまったく同様に動作しません。

たとえば、Object.keys onは空の配列を返します（ClientRectプロパティはenumerableではないためだと思います）

私はプレーンなオブジェクトに変換するための汚い方法の何かを見つけました：

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

私の質問は、もっと良い方法はありますか？

javascriptdomgetboundingclientrect
17
Zach Lysobey

複雑すぎないようにしましょう！

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
  };
}

ES2015：

const getBoundingClientRect = element => { 
  const {top, right, bottom, left, width, height, x, y} = element.getBoundingClientRect()
  return {top, right, bottom, left, width, height, x, y} 
}

console.log(
  getBoundingClientRect( document.body )
)
19
Bartosz Gościński

警告：非標準の動作（ Firefox <62 では機能しません。ESR60や、場合によっては、クロム）

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

JQueryを使用している場合はextendメソッドを使用できます。

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

これは私が一緒に暮らせるものです：

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

機能する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())
1
pkfm