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?

Answer 1

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