jQuery: दस्तावेज तैयार होने के बाद div-width प्राप्त करें और

Question

मैं एक div कंटेनर की चौड़ाई प्राप्त करने की कोशिश कर रहा हूं ताकि दूसरे div में दूसरी सीएसएस विशेषता को सेट किया जा सके, जिसे मैं पृष्ठ के बाद जानता था पूरी तरह से लोड और प्रस्तुत किया।

$().ready(function() { 
    doLayout(); 
} 
function doLayout() { 
    var $width = $("#sidebar").attr("width"); 
    $("#content").css("left", width); 
} 

समस्या है, इससे पहले कि पेज प्रदान की गई है और इस तरह चौड़ाई विशेषता सेट नहीं है (या "अपरिभाषित") तैयार कहा जाता है:

मैं इस कोड है। मैं वर्तमान चौड़ाई कैसे निर्धारित कर सकता हूं?

संपादित करें: सुझाव दिया परिवर्तन के बाद मैं इस fiddle लेकिन कोड वहाँ काम कर रहा है है, लेकिन मेरा असली आवेदन में यह नहीं है। तो समस्या कहीं और है, मुझे लगता है :(

Answer 1

उपयोग load रूप में अच्छी तरह लोड करने के लिए/बाह्य सामग्री सभी छवियों के लिए प्रतीक्षा करने, के रूप में इन तत्व आयाम बदल सकता है:

$(window).load(function() { 
    doLayout(); 
}); 

फिर गणना चौड़ाई प्राप्त करने के लिए, width का उपयोग करें:

$("#content").width(); // width in px 

Answer 2

$(document).ready(function() { 
    doLayout(); 
} 


function doLayout() { 
     var width = $("#sidebar").css("width"); 
     $("#content").css("left", width); 
    } 

Answer 3

उपयोग:

$(document).ready(function() { 
    doLayout(); 
} 

function doLayout() { 
    var width = $("#sidebar").css("width"); 
    $("#content").css("left", width); 
} 

यह आपको मदद नहीं करेगा अगर चौड़ाई एक छवि द्वारा नियंत्रित किया जाता है, साथ छवियों जब गाया नहीं किया जा सकता दस्तावेज़ तैयार है। यदि इससे भी काम नहीं करता है, हम और अधिक संदर्भ की जरूरत है।

Answer 4

एक divwidth का कोई विशेषता होगी। यह आप width की एक सीएसएस शैली की संपत्ति है, जो आप .css('width') का उपयोग कर प्राप्त कर सकते हैं नहीं है, लेकिन हो सकता है भी inte हो सकता है outerWidth() या innerWidth() या width() में विश्राम किया गया जो जावास्क्रिप्ट द्वारा गणना की गई चौड़ाई को वापस कर देता है।

कैसे ऊपर उल्लेख किया width तरीकों अलग दस्तावेज में पढ़ा जा सकता है, लेकिन बस का एक अच्छा विवरण;

1. outerWidth() खाता गद्दी + मार्जिन में ले जाता है
2. width() खाते में गद्दी लेता
3. innerWidth() ध्यान में रखता है न।

Answer 5

एक समान समस्या थी (offsetWidth 0 था क्योंकि तत्व अभी तक प्रस्तुत नहीं किया गया था)। मैंने एक सरल किया:

setTimeout(function() { 
... do stuff that needed final width of object ... 
}, 0) 

और ऐसा लगता है कि यह मेरे मामले पर बेकार ढंग से काम करता है। जावास्क्रिप्ट वर्तमान कॉलस्टैक खाली होने पर यह मूल रूप से वापस कॉल करने के लिए कहता है।

मुझे लगता है कि अगर आप जावास्क्रिप्ट में एक डोम तत्व बना सकते हैं और इसकी चौड़ाई बाहरी सीएसएस में परिभाषित किया गया है, "100%" होने के लिए offsetWidth (और offsetHeight) की इस वस्तु जावास्क्रिप्ट समाप्त चल रहा है सब से पहले गणना नहीं किया जाएगा ।

setTimeout(callback, 0) का उपयोग करके, ऐसा लगता है कि ब्राउज़र जावास्क्रिप्ट वर्तमान कॉल को समाप्त करने के बाद कहा जाता है और सभी सीओएम तत्वों को सभी सीएसएस लागू करने के लिए समय निकाला है।