कैसे सबसे अच्छा एक सादे वस्तु में एक ClientRect/DomRect कन्वर्ट करने के लिए

Question

someElement.getBoundingClientRect() का परिणाम देता है एक विशेष प्रकार ClientRect (या DomRect जाहिरा तौर पर)

यह {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

var obj = Object.assign({}, el.getBoundingClientRect().toJSON()) 

Answer 2

चलो चीज़ों को कम नहीं करते हैं!

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 3

आप इस्तेमाल कर सकते हैं विधि का विस्तार अगर आप jQuery का उपयोग कर रहे हैं।

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