javascript - jQuery getting height of div returns 0 -

मेरे पास एक jquery html ऑब्जेक्ट है:

  var $ header = $ ('& lt; Div id = "print-header" class = "print-header" शैली = "चौड़ाई: '+ this.previewWidth +' px; min-height: 190px;" & gt; & lt; / div & gt; ');  

जब मैं इसे console.log ($ header) के साथ आउटपुट करता हूं; मैं ऑब्जेक्ट देख सकता / सकती हूं।

अब उसके बाद के लिए आता है लूप जो फ्लोट के साथ तत्वों को जोड़ता है, $ header वस्तु

  के लिए (var i = 0; i & lt ; $ Form.length; i ++) {var $ विजेट = $ रूप [i]; Var wHtml = '& lt; div class = "element" style = "width:' + $ widget.size_x * 10 + '%; ऊँचाई:' + $ विजेट.size_y * 10 + '%; float: left;" & gt; '; स्विच ($ widget.widget_name) {केस "textFieldWidget": wHtml + = '& lt; div शैली = "सीमा नीचे: 2px बिंदीदार, चौड़ाई: 100%; ऊंचाई: 30px; मार्जिन: 5px;" & gt; & lt; अवधि शैली = "स्थिति: रिश्तेदार; फ़ॉन्ट-आकार: 11px; फ़ॉन्ट-शैली: इटैलिक; रंग: # 999; शीर्ष: 16; बाईं: 10;" & gt; ' + $ Widget.name + '& lt; / span & gt; & lt; / div & gt;'; टूटना; ... "imageWidget": wHtml + = '& lt; div शैली = "मार्जिन: 5px;" & gt; & lt; img src = "' + $ widget.options [0] .value + '" शैली = "चौड़ाई: 100%; ऊंचाई: 100%; "& gt; & lt; / div & gt; '; टूटना; } WHtml + = '& lt; / div & gt;'; अगर ($ widget.section == 0) {$ header.append (wHtml); } ...  

लूप के दौरान, जब तत्व जोड़ दिया गया है, मैं $ header

 < कोड> $ header.append ('& lt; div वर्ग = "स्पष्ट" शैली = "स्पष्ट: दोनों;" & gt; & lt; / div & gt;');  

इस बिंदु पर मुझे कुछ संसाधित करने के लिए $ header ऊंचाई की गणना करने की आवश्यकता है और यह वह हिस्सा है जहां मैं फंस गया हूं। कोई भी बात नहीं है कि मैं .height () , .outerHeight () , .innerHeight () या .prop ("scrollHeight" ) , ऊंचाई हमेशा लौट जाती है 0।

  console.log ($ हैडर); // $ हेडर ऑब्जेक्ट console.log देता है ("सामान्य:" + $ header.height ()); // रिटर्न 0 console.log ("बाहरी:" + $ header.outerHeight ()); // रिटर्न 0 console.log ("इनर:" + $ header.innerHeight ()); // रिटर्न 0 console.log ("स्क्रॉल करें:" + $ header.prop ("scrollHeight")); // रिटर्न 0  

मैंने $ (window) .load () उपयोग करने की कोशिश की है, जो काम नहीं कर रहा था। Div दिखाई दे रही है ( डिस्प्ले: ब्लॉक; )। मैंने अतिप्रवाह: छिपी हुई जोड़ने की भी कोशिश की, जो कि काम नहीं कर सका

DOM को तत्वों को जोड़ने के बाद ब्राउज़र को रेंडर करने की आवश्यकता है। थोड़े इंतजार के साथ आपको ऊँचाई प्राप्त करने में सक्षम होना चाहिए।

पहले सुनिश्चित करें कि आप डोम को शीर्षलेख जोड़ते हैं अन्यथा यह गाया नहीं गया है और इसलिए कभी भी ऊँचाई नहीं मिलती।

  document.body.appendChild ($ हैडर); $ Header.append ('& lt; div वर्ग = "स्पष्ट" शैली = "स्पष्ट: दोनों;" & gt; & lt; / div & gt;'); console.log ($ हैडर); // $ हेडर ऑब्जेक्ट सेटटाइमआउट देता है (फ़ंक्शन () {console.log ("सामान्य:" + $ header.height ()); console.log ("बाहरी:" + $ header.outerHeight ()); console.log ("इनर:" + $ हैडर.नरहाइट ()); console.log ("स्क्रॉल करें:" + $ हैडर.प्रॉप ("स्क्रॉलहाइट"));}, 100);