ऑफसेटहाइट और क्लाइंटहाइट के बीच अंतर

154

जावास्क्रिप्ट डोम में - एक तत्व के ऑफसेटहाइट और क्लाइंटहाइट के बीच क्या अंतर है?

javascript

— स्टीव
स्रोत

यहाँ एक अच्छा डेमो उदाहरण jsfiddle.net/shibualexis/yVhgM/3

— जिब्बो

जवाबों:

203

ग्राहक :

किसी ऑब्जेक्ट के लिए दृश्यमान क्षेत्र की ऊँचाई को पिक्सेल में देता है। मान में पैडिंग के साथ ऊँचाई होती है, लेकिन इसमें स्क्रॉलबार, बॉर्डर और मार्जिन शामिल नहीं हैं।

ऑफसेट :

किसी ऑब्जेक्ट के लिए दृश्यमान क्षेत्र की ऊँचाई को पिक्सेल में लौटाता है। मान में पैडिंग, स्क्रॉलबार और बॉर्डर के साथ ऊँचाई होती है, लेकिन इसमें मार्जिन शामिल नहीं है।

इसलिए, offsetHeightस्क्रॉलबार और बॉर्डर शामिल clientHeightनहीं है।

— Oded
स्रोत

एक और बात मैंने देखी कि क्लाइंटहाइट ऑफ़सेटहाइट की तुलना में बहुत तेज़ है। क्या आपके पास कोई विचार है क्यों?

— डिस्कडर डांसर 14

@ disc0dancer - शायद इसलिए कि ब्राउज़र में पहले से ही clientSizeआसानी से उपलब्ध है (आखिरकार, यह व्यूपोर्ट है), लेकिन offsetHeightपूरे दस्तावेज को वापस करने के बाद गणना करने की आवश्यकता है ?

— ओड

वैसे वेबकिट इंस्पेक्टर का कहना है कि रिफ़्लो पूरे डॉक्यूमेंट पर भी हैं, जबकि क्लाइंटहाइग के लिए भी।

— डिस्कडर डांसर

@ disc0dancer - मेरे अनुमान के लिए बहुत कुछ। लेकिन यह एक कार्यान्वयन बात है - सुनिश्चित नहीं है कि सभी ब्राउज़र ऐसे हैं।

— Oded

Oded का उत्तर सिद्धांत है। लेकिन सिद्धांत और वास्तविकता हमेशा समान नहीं होते हैं, कम से कम <BODY> या <HTML> तत्वों के लिए नहीं जो कि जावास्क्रिप्ट में स्क्रॉलिंग संचालन के लिए महत्वपूर्ण हो सकते हैं।

MSDN में Microsoft की एक अच्छी छवि है :

क्लाइंटहाइट, ऑफ़सेटहाइट, स्क्रॉलहाइट

यदि आपके पास एक HTML पृष्ठ है जो एक ऊर्ध्वाधर स्क्रॉलबार दिखाता है, तो यह उम्मीद करेगा कि या तो <BODY> या <HTML> तत्व का ऑफसेटहाइट की तुलना में स्क्रॉलहाइट गेटर है, जैसा कि यह छवि दिखाता है। यह Internet Explorer के सभी पुराने संस्करणों के लिए सही है।

लेकिन यह इंटरनेट एक्सप्लोरर 11 के लिए सच नहीं है और फ़ायरफ़ॉक्स 36 के लिए नहीं है। कम से कम इन ब्राउज़रों में ऑफसेटसेटाइट लगभग स्क्रॉलहाइट के समान है जो गलत है।

और जब ऑफसेट ऑफसेट गलत हो सकता है, क्लाइंटहाइट हमेशा सही होता है।

विभिन्न ब्राउज़रों पर निम्न कोड आज़माएँ और आप देखेंगे:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

जबकि पुराने इंटरनेट एक्सप्लोरर सही ढंग से दिखाता है:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर 11 से आउटपुट है:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

जो स्पष्ट रूप से दर्शाता है कि यहां ऑफसेटहाइट गलत है। ऑफसेटहाइट और क्लाइंटहाइट केवल कुछ पिक्सेल अलग होने चाहिए या समान होना चाहिए।

कृपया ध्यान दें कि ClientHeight और OffsetHeight उन तत्वों के लिए भी भिन्न हो सकते हैं जो उदाहरण के लिए दिखाई नहीं देते हैं जैसे <FORM> जहाँ OffsetHeight FORM का वास्तविक आकार हो सकता है जबकि ClientHeight शून्य हो सकता है।

— Elmue
स्रोत