How best to convert a ClientRect / DomRect into a plain Object

Question

The result of someElement.getBoundingClientRect() returns a special object of type ClientRect (or DomRect apparently)

It is structured like {top: 10, right: 20, bottom: 30, left: 10, width: 10}

Unfortunately, this object does not behave quite like other objects.

For example, using Object.keys on it returns an empty array (I think because ClientRect properties are not enumerable

I found something of a dirty way to convert to a plain object:

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

My question is, is there a better way?

This is _soooo_ hacky, but `Object.keys(document.body.getBoundingClientRect().__proto__)` seems to work in chrome. :P — Joseph Marikle, Sep 09 '16 at 18:32
Make that `Object.keys(Object.getPrototypeOf(document.body.getBoundingClientRect()))` and it isn't as hacky anymore — Gust van de Wal, Apr 04 '22 at 15:38

score 32 · Accepted Answer · edited Nov 25 '19 at 15:14

32

Let's not overcomplicate things!

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 )
)

edited Nov 25 '19 at 15:14

Community

1
1

answered Sep 09 '16 at 19:14

Bartosz Gościński

1,468
1
16
28

10

Here's an ES6 version: ```const getBoundingClientRect = (element) => { const {top, right, bottom, left, width, height, x, y} = element.getBoundingClientRect(); return {top, right, bottom, left, width, height, x, y} } ``` – aboutaaron Jul 14 '17 at 15:28

score 6 · Answer 2 · edited Feb 06 '19 at 11:29

6

Warning: non-standard behavior (doesn't work in Firefox < 62, including ESR 60 and possibly other browsers other than Chrome)

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

edited Feb 06 '19 at 11:29

icl7126

5,740
4
53
51

answered Feb 05 '18 at 21:51

jsdiamond

165
2
2

I think you don't even need the `Object.assign` there. `.toJSON` retuns a proper object (`Object.keys($0.getBoundingClientRect().toJSON()) ` works). You get a fresh object every time too! `$0.getBoundingClientRect().toJSON() !== $0.getBoundingClientRect().toJSON()` – Zach Lysobey Feb 08 '18 at 23:48
1

keep in mind, `toJSON` is not working for rect objects at firefox folks – mkg Mar 15 '18 at 15:30
2

Sorry, but I have to downvote the answer since you didn't mention it doesn't support with Firefox – Yami Odymel May 07 '18 at 12:57

score 5 · Answer 3 · answered May 08 '19 at 18:00

5

This is something that I can live with:

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

answered May 08 '19 at 18:00

Skyrocker

970
8
15

Doesn't work in Edge. But when Edge switches to Chromium, that will be resolved. – Fredrik_Borgstrom Nov 07 '19 at 14:34
1

As a general rule, one should avoid converting numbers to strings (and back) unless necessary. String operations are a lot more expensive that working with numbers, so if you have to do this operation many times performance will suffer. – Michael Johansen Nov 15 '21 at 19:18
@MichaelJohansen, completely agree, good remark – Skyrocker Nov 16 '21 at 11:13

score 4 · Answer 4 · edited Dec 02 '16 at 11:56

4

You could use the extend method if you are using jQuery.

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

edited Dec 02 '16 at 11:56

Syed Waqas Bukhary

5,130
5
47
59

answered Dec 02 '16 at 11:17

Vince

49
1
2

2

This can and does work, but $.extend is notoriously inefficient compared to various other cloning methods. See http://jsben.ch/#/bWfk9. As OP notes ClientRect is a special object though, and most (all?) other techniques do not work as expected, so not a lot of choices here. – kamelkev Feb 07 '17 at 20:51

score 3 · Answer 5 · edited Nov 03 '21 at 21:30

You could use Object.fromEntries() to create your obj.

Obj keys can be taken from DOMRectReadOnly´s prototype
Obj vals can be mapped in Array.from()´s 2nd parameter (callbak fn)

let domRec = document.getElementById('test').getBoundingClientRect();

// Convert to plain Object
let domObj = Object.fromEntries(Array.from(Object.keys(DOMRectReadOnly.prototype).filter(k => !isNaN(domRec[k])), k => [k, domRec[k]]));

// Convert back to DOMRectReadOnly
let domRec2 = DOMRectReadOnly.fromRect(domObj);

console.log('DOMRectReadOnly', domRec);
console.log('Plain Object', domObj);
console.log('DOMRectReadOnly', domRec2);

#test {
  width: 200px;
  height: 50px;
  background-color: #f00;
}

<div id="test"></div>

However this would also copy the toJSON fn to the new obj. Therefore I suggest to filter non-numeric values: .filter(k => !isNaN(domRec[k]).

Lightweight

If you are just interested in x, y, width, height, you could use DOMRect instead of DOMRectReadOnly and skip the .filter() part.

You can calc values for bottom, right from these 4 values and left, top are just aliases for x, y.

let domRec = someElement.getBoundingClientRect();
let domObj = Object.fromEntries(Array.from(Object.keys(DOMRect.prototype), k => [k, domRec[k]]));

score 2 · Answer 6 · answered Jul 01 '19 at 19:38

Functional ES6 variant:

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())

How best to convert a ClientRect / DomRect into a plain Object

6 Answers6

ES2015:

Lightweight

Linked

Related