तत्व निर्माण के ठीक बाद पिक्सेल मूल्यों के लिए कॉम्प्यूटेड स्टाइल 'ऑटो' क्यों मिलता है?

Question

मैंने कुछ HTML उत्पन्न करने के लिए मूंछ का उपयोग किया और पृष्ठ पर रखने के लिए insertAdjacentHTML का उपयोग किया। यह स्पष्ट रूप से एक डीओएम संरचना में परिवर्तित हो गया क्योंकि मैं document.querySelector('.contentarea') कॉल का उपयोग करके इसे बाद में संभाल सकता हूं। हालांकि, अगर मैं चौड़ाई या ऊंचाई के लिए पिक्सेल मान प्राप्त करने का प्रयास करता हूं, तो यह 'auto' को फेंकता रहता है।

सोच रहा है कि यह getComputedStyle के साथ एक समस्या हो सकती है, मैंने इसके बजाय .getBoundingClientRect और .offsetWidth का उपयोग करने का प्रयास किया। दोनों 0 लौट आए। यह काम करता है अगर मैं इसे setTimeout(function(){}, 1) के अंदर रखकर थोड़ी देर में कॉल में देरी करता हूं, लेकिन यह मेरे उत्पादन कोड के लिए व्यावहारिक नहीं है क्योंकि इसे एक सिंक्रोनस कन्स्ट्रक्टर के अंदर जाना है।

यह फ़ायरफ़ॉक्स (अरोड़ा) और क्रोम दोनों में हो रहा है। मुझे याद आया कि मोज़िला ने आलसी फ्रेम निर्माण का उपयोग करके डोम मैनिपुलेशन प्रदर्शन में सुधार कैसे किया और सोचा कि फ्रेम भी आलसी होने के साथ एक बग हो सकता है, लेकिन चूंकि यह क्रोम में भी हो रहा है, ऐसा लगता है कि यह कम संभावना है।

क्या किसी के पास इस बारे में कोई विचार है कि यहां क्या हो रहा है या इसके आसपास कैसे काम करना है? एचटीएमएल डालने के तुरंत बाद मुझे पिक्सेल ऊंचाई/चौड़ाई की जानकारी चाहिए।

पीएस: क्या कोई ब्राउज़र HTML को डीओएम पार्सिंग/बिल्डिंग को अलग थ्रेड में करता है? मैं सोच रहा था कि इस तरह के व्यवहार का कारण भी हो सकता है।

नेवरमिन्ड: यह मेरी अपनी गलती थी। मैंने अभी तक display: none; शैली नहीं देखी है जो कोड को मापने की कोशिश करने से पहले सेट किया गया था।

Answer 1

कुछ ऐसी चीजें हैं जो "ऑटो" के परिणामस्वरूप हो सकती हैं। आपने उनमें से एक पाया; display: none। यदि कोई तत्व इनलाइन है तो यह ऑटो भी वापस कर देगा।

अनिवार्य रूप से यह block या inline-block तत्व होना चाहिए और इसे प्रस्तुत किया जाना चाहिए।

Answer 2

मेरे अनुभव में कई ब्राउज़रों (आईई, क्रोम, फ़ायरफ़ॉक्स) उद्देश्य से जावास्क्रिप्ट धागे के अंत तक या टाइमआउट कॉल के माध्यम से उपज के बाद कंप्यूटिंग लेआउट में देरी करते हैं।

केवल मुझे पता है कि समाधान ब्राउज़र पर उपज है और फिर पुनरारंभ करें। setTimeout का उपयोग करने की आपकी विधि अच्छी तरह से काम करती है।