क्यों बाउंडिंग क्लाइंटरटेक्ट आईई और फ़ायरफ़ॉक्स

Question

में अलग-अलग मान देता है मेरे पास एक छवि नियंत्रण है और मुझे छवि नियंत्रण के शीर्ष पर कुछ तत्व रखने की आवश्यकता है। जब मैंने getBoundingClientRect() का उपयोग किया, तो यह आईई (7,8 और 9) में काम कर रहा है लेकिन यह फ़ायरफ़ॉक्स और क्रोम में अलग-अलग मान दे रहा है। क्या तत्व के बाउंडिंग आयत को प्राप्त करने के लिए कोई अन्य फ़ंक्शन उपलब्ध है?

Answer 1

getBoundingClientRect के लिए पुराने IE प्रलेखन से प्रशस्ति पत्र:: यहाँ comp.lang.javascript से उसकी की एक टिप है "माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर 5 में, खिड़की के ऊपरी-बाएं के संबंध में 2,2 (पिक्सेल) पर है सही ग्राहक। " यह अभी भी वैध प्रतीत होता है।

आईई 9 उपयोग में <meta http-equiv="x-ua-compatible" content="ie=edge"/> ऊपरी-बाएं कोने को अपनी सही स्थिति (0,0) पर "सेट" करता है।

d4rkpr1nc3 के उत्तर के रूप में, आप उन मानों को अन्य तरीकों से प्राप्त कर सकते हैं, लेकिन परिणाम भी उपयोग किए गए ब्राउज़र पर निर्भर करते हैं। मुझे लगता है कि आपको इस समस्या के लिए थोड़ा अलग दृष्टिकोण की आवश्यकता होगी। नीचे दिए गए कोड को चेक करें, यह आपको कुछ विचार दे सकता है।

<DIV id="imagecontrol" style="position:absolute;width:200px;height:200px;"> 
    <DIV id="topleft" style="position:absolute;width:100px;height:100px;left:0px;top:0px;"></DIV> 
    <DIV id="topright" style="position:absolute;width:100px;height:100px;right:0px;top:0px;"></DIV> 
    <DIV id="bottomleft" style="position:absolute;width:100px;height:100px;left:0px;bottom:0px;"></DIV> 
    <DIV id="bottomright" style="position:absolute;width:100px;height:100px;right:0px;bottom:0px;"></DIV> 
</DIV> 

Answer 2

वैसा करने के लिए, इस तरह ऑफसेट इस्तेमाल कर सकते हैं:

var top = element.offsetTop; 
var left = element.offsetLeft; 
var width = element.offsetWidth; 
var height = element.offsetHeight; 
var bottom = top + height; 
var right = left + width; 

Answer 3

मूल्यों शायद थोड़ा अलग ब्राउज़रों लेकिन getBoundingClientRect() में विभिन्न अभी भी प्रदर्शन और सटीकता के लिए अपने सबसे अच्छे शर्त है। इसके द्वारा किए गए निर्देशांक दस्तावेज़ के बजाए व्यूपोर्ट के सापेक्ष हैं, इसलिए, आपको उस विंडो/दस्तावेज़ पर स्क्रॉल मानों का उपयोग करने के लिए खाते की आवश्यकता होगी।

यहाँ इस बारे में एक अच्छा ब्लॉग पोस्ट है:

http://weblogs.asp.net/bleroy/archive/2008/01/29/getting-absolute-coordinates-from-a-dom-element.aspx

डेविड मार्क इस सामान पर अच्छा है।

https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ