क्या कोई DOM तत्व के बाध्यकारी बॉक्स (पिक्सेल में) प्राप्त करने का कोई तरीका है?

Question

जावास्क्रिप्ट के साथ एक DOM तत्व के बाध्यकारी बॉक्स निर्देशांक प्राप्त करने का कोई तरीका है?

स्पष्ट रूप से मैं इसे विभिन्न सीएसएस गुणों से गणना कर सकता हूं: width, height, और इसी तरह।

मैं पूछ रहा हूं क्योंकि कई अन्य ग्राफिकल प्लेटफॉर्म हैं जो इसे एक विधि के रूप में प्रदान करते हैं। उदाहरण के लिए जाहिर है कि यह XUL में this post के अनुसार किया जा सकता है, जो एक विधि getBoundingClientRect() का वर्णन करता है।

Answer 1

मान लें कि आपका DOM तत्व आईडी myElement था चलो (मेरा लक्ष्य जाँच करने के लिए दो तत्व ओवरलैप है कि क्या है।)।

document.getElementById("myElement").offsetLeft; //Left side of box 
document.getElementById("myElement").offsetTop; //Top side of box 
document.getElementById("myElement").offsetLeft 
    + document.getElementById("myElement").offsetWidth; //Right side of box 
document.getElementById("myElement").offsetTop 
    + document.getElementById("myElement").offsetHeight; //Bottom side of box 

नीचे और दाएँ पक्ष के लिए, कोड मूल रूप से बाएं या शीर्ष ओर करने के लिए चौड़ाई या सीमांकन बॉक्स की ऊंचाई कहते हैं।

आप इस प्रकार, के लिए, आप एक बार document.getElementById("myElement") को परिभाषित करने और संदर्भ इस्तेमाल कर सकते हैं चाहता था, तो: Element.getBoundingClientRect

:

var myElement = document.getElementById("myElement"); 
myElement.offsetLeft; //Left side of box 
myElement.offsetTop; //Top side of box 
myElement.offsetLeft + myElement.offsetWidth; //Right side of box 
myElement.offsetTop + myElement.offsetHeight; //Bottom side of box 

Answer 2

वास्तव में, सीमांकन आयत प्राप्त करने के लिए निर्मित एक विधि है विधि तत्व (दृश्य) शीर्ष, दाएं, नीचे, और तत्व के बाएं निर्देशांक के साथ-साथ इसकी चौड़ाई और ऊंचाई वाला ऑब्जेक्ट देता है।

Example (JSFiddle)

और जानकारी:

• Element.getBoundingClientRect
• getBoundingClientRect is Awesome (John Resig)