jQuery: ottieni div-width dopo che il documento è pronto e reso

Question

Sto cercando di ottenere la larghezza di un contenitore div per impostare un altro attributo css in un altro div alla larghezza del primo, che so dopo che la pagina è stata completamente caricato e reso.

ho questo codice:

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

Il problema è che il pronto viene chiamato prima la pagina viene visualizzata e quindi attributo width non è impostato (o "indefinito"). Come posso determinare la larghezza attuale?

EDIT: Dopo modifiche suggerite Ho questa fiddle ma il codice non ci sta lavorando, ma nella mia applicazione reale non lo è. Quindi il problema è da qualche altra parte, immagino :(

Answer 1

Usa load aspettare per tutte le immagini/contenuto esterno per caricare così, in quanto potrebbero alterare le dimensioni dell'elemento:

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

Quindi per ottenere la larghezza calcolata, utilizzare 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

Usa:

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

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

Questo non vi aiuterà se la larghezza è controllata da un'immagine, come le immagini non possono essere resi quando il documento è pronto. Se questo non funziona, abbiamo bisogno di più contesto.

Answer 4

un div avrà nessun attributo di width. si può avere una proprietà di stile CSS di width, che è possibile recuperare utilizzando .css('width'), ma si potrebbe anche essere inte riposato in outerWidth() o innerWidth() o width() che restituiscono la larghezza calcolata da JavaScript.

Una buona spiegazione di come i suddetti metodi differiscono width possono essere letti nella documentazione, ma semplicemente;

1. outerWidth() tiene conto padding + margine
2. width() tiene imbottitura conto
3. innerWidth() tiene né in considerazione.

Answer 5

Aveva un problema simile (offsetWidth era 0 perché l'elemento non era ancora stato reso). Ho fatto un semplice:

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

E sembra funzionare perfettamente sul mio caso. Questo in sostanza chiede di essere richiamato ogni volta che il callstack attuale di javascript è vuoto.

Immagino che se si crea un elemento DOM in javascript e la sua larghezza è definita in CSS esterno di essere "100%", il offsetWidth (e offsetHeight) di questo oggetto non verrà calcolato prima di tutto Javascript deve correre finito .

Utilizzando setTimeout(callback, 0), sembra essere chiamato dopo che il browser ha terminato la chiamata in javascript corrente E ha avuto il tempo di applicare tutti i CSS ai nuovi elementi DOM.