jQuery: get div-width, gdy dokument jest gotowy i renderowany

Question

Próbuję uzyskać szerokość kontenera div, aby ustawić inny atrybut css w innym dziale na szerokość pierwszego, który znam po stronie w pełni załadowany i renderowany.

mam ten kod:

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

Problem polega na tym, gotowy jest wywoływana przed strona jest renderowane, a tym samym szerokość atrybut nie jest ustawiony (lub „nieokreślone”). Jak mogę określić aktualną szerokość?

EDIT: Po proponowanych zmianach mam ten fiddle ale kod nie działa, ale w moim rzeczywistej aplikacji nie jest. Więc problem jest gdzieś indziej, myślę :(

Answer 1

Zastosowanie load czekać na wszystkich obrazów/treść zewnętrznych załadować jak dobrze, że mogą one zmieniać wymiary elementu:

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

Następnie, aby uzyskać obliczoną szerokość, użyj 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

Zastosowanie:

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

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

to nie pomoże, jeśli szerokość jest kontrolowana przez obraz, jak obrazy nie mogą być renderowane, gdy dokument jest gotowy. Jeśli to nie pomoże, musimy więcej kontekstu.

Answer 4

div nie będą miały atrybut width. może mieć właściwość stylu CSS width, który można pobrać za pomocą .css('width'), ale może również być inte wypoczęty w outerWidth() lub innerWidth() lub width(), które zwracają szerokość obliczoną przez JavaScript.

dobre wyjaśnienie, w jaki sposób powyższe width metody różnią można przeczytać w dokumentacji, ale po prostu;

1. outerWidth() uwzględnia wyściółką + marża
2. width() trwa wyściółka pod uwagę
3. innerWidth() bierze ani pod uwagę.

Answer 5

Miał podobny problem (offsetWidth był 0, ponieważ element nie został jeszcze wyrenderowany). Zrobiłem prosty:

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

I wydaje się działać bezbłędnie w mojej sprawie. W zasadzie prosi się o oddzwonienie, gdy aktualny stan wywołania javascript jest pusty.

myślę, że po utworzeniu elementu DOM w JavaScript, a jego szerokość jest zdefiniowane w zewnętrznym CSS być „100%”, to offsetWidth (i offsetHeight) tego obiektu nie zostanie obliczony przed wszystkim javascript zakończeniu działania .

Używając setTimeout(callback, 0), wydaje się być wywoływana po tym, jak przeglądarka zakończy bieżące wywołanie javascript I poświęciła czas na zastosowanie całego CSS do nowych elementów DOM.