तो क्या इसका जवाब है?
"यदि आपको कुछ गणना करने की आवश्यकता है, लेकिन इसे न दिखाएं, तत्व को visibility:hiddenऔर पर सेट करेंposition:absolute , इसे DOM ट्री में जोड़ें, ऑफसेटहाइट प्राप्त करें, और इसे हटा दें। (पिछली बार जब मैंने चेक किया था तो प्रोटोटाइप लाइब्रेरी लाइनों के पीछे करता है)।"
मैं कई तत्वों पर एक ही समस्या है। साइट पर उपयोग करने के लिए कोई jQuery या प्रोटोटाइप नहीं है, लेकिन अगर यह काम करता है तो मैं तकनीक को उधार लेने के पक्ष में हूं। कुछ चीजों के उदाहरण के रूप में, जो काम करने में विफल रहीं, उसके बाद क्या किया, मेरे पास निम्नलिखित कोड हैं:
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
जो मूल रूप से शून्य परिणाम प्राप्त करने के लिए कुछ भी और सब कुछ करने की कोशिश करता है। कोई प्रभाव नहीं के साथ ClientHeight। समस्या तत्वों के साथ मैं आमतौर पर बेस में NaN और ऑफसेट और स्क्रॉल हाइट्स में शून्य प्राप्त करता हूं। मैंने तब DOM समाधान जोड़ें और क्लाइंटरीज़ को देखने की कोशिश की कि क्या यह यहाँ काम करता है।
29 जून 2011, मैंने वास्तव में बेहतर परिणाम के साथ DOM और clientHeight दोनों को जोड़ने की कोशिश करने के लिए कोड को अपडेट किया।
1) क्लाइंटहाइट भी 0 था।
2) डोम ने वास्तव में मुझे एक ऊंचाई दी जो महान थी।
3) ClientRects डोम तकनीक के समान परिणाम देता है।
क्योंकि जोड़े गए तत्व प्रकृति में तरल होते हैं, जब उन्हें अन्यथा खाली DOM Temp तत्व में जोड़ा जाता है, तो वे उस कंटेनर की चौड़ाई के अनुसार प्रदान किए जाते हैं। यह अजीब हो जाता है, क्योंकि यह 30px से कम है जो अंततः समाप्त हो जाता है।
मैंने यह बताने के लिए कुछ स्नैपशॉट जोड़े कि ऊंचाई की गणना कैसे की जाती है।
ऊँचाई के अंतर स्पष्ट हैं। मैं निश्चित रूप से पूर्ण स्थिति जोड़ सकता हूं और छिपा हुआ हूं लेकिन मुझे यकीन है कि कोई प्रभाव नहीं पड़ेगा। मुझे यकीन था कि यह काम नहीं करेगा!
(मैं आगे पीछे हटता हूँ) ऊँचाई निकलती है (रेंडर करती है) सही रेंडर की ऊँचाई से कम। यह मौजूदा माता-पिता से मेल खाने के लिए DOM टेंप तत्व की चौड़ाई निर्धारित करके संबोधित किया जा सकता है और सिद्धांत में काफी सटीक रूप से किया जा सकता है। मुझे यह भी नहीं पता है कि उन्हें हटाने और उनके मौजूदा स्थान में वापस जोड़ने के परिणामस्वरूप क्या होगा। जैसा कि वे एक आंतरिक HTML तकनीक के माध्यम से पहुंचे, मैं इस अलग दृष्टिकोण का उपयोग करना चाहूंगा।
* कैसे * इनमें से कोई भी आवश्यक नहीं था। वास्तव में यह विज्ञापित के रूप में काम किया और सही ऊंचाई लौटा दिया !!!
जब मैं मेनू को फिर से आश्चर्यजनक रूप से दिखाई देने में सक्षम था, तो DOM ने पृष्ठ (279px) के शीर्ष पर द्रव लेआउट में सही ऊंचाई वापस कर दी थी। उपरोक्त कोड भी getClientRects का उपयोग करता है जो 280px वापस आते हैं।
यह निम्नलिखित स्नैपशॉट में चित्रित किया गया है (काम करने के बाद क्रोम से लिया गया है)।
अब मुझे पता नहीं है कि प्रोटोटाइप चाल क्यों काम करती है, लेकिन ऐसा लगता है। वैकल्पिक रूप से, getClientRects भी काम करता है।
मुझे संदेह है कि इन विशेष तत्वों के साथ इस सभी परेशानी का कारण appendChild के बजाय इनर HTML का उपयोग था, लेकिन इस बिंदु पर शुद्ध अटकलें हैं।