jQuery: obtener div-width después de que el documento esté listo y renderizado

Question

Estoy tratando de obtener el ancho de un contenedor div para establecer otro atributo css en otro div al ancho del primero, que sé después de que la página fue completamente cargado y renderizado.

tengo este código:

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

El problema es que la lista se llama antes de que la página se representa y por lo tanto no se establece el atributo de anchura (o "indefinido"). ¿Cómo puedo determinar el ancho actual?

EDIT: Después de los cambios sugeridos que tienen este fiddle pero el código no está trabajando, pero en mi aplicación real no lo es. Así que el problema está en otra parte, supongo :(

Answer 1

Uso load que esperar a que todas las imágenes/contenido externo para cargar así, ya que podrían alterar las dimensiones de los elementos:

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

luego a que la anchura calculada, utilice 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

Uso:

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

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

Esto no le ayudará si el ancho es controlado por una imagen, ya que las imágenes no se pueden representar cuando el documento está listo. Si esto no funciona, necesitamos más contexto.

Answer 4

un div tendrá ningún atributo de width. puede tener una propiedad de estilo CSS de width, que se puede recuperar usando .css('width'), pero también puede ser inte descansa en outerWidth() o innerWidth() o width() que devuelve el ancho calculado por JavaScript.

Una buena explicación de cómo los mencionados anteriormente width métodos difieren se puede leer en la documentación, sino simplemente;

1. outerWidth() tiene en cuenta el relleno + margen
2. width() toma en cuenta el relleno
3. innerWidth() toma ni en cuenta.

Answer 5

Tenía un problema similar (offsetWidth era 0 porque el elemento aún no se había procesado). Hice un simple:

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

Y parece funcionar sin problemas en mi caso. Básicamente, esto pide que se le devuelva la llamada cuando javascript current callstack esté vacío.

supongo que si crea un elemento DOM en javascript y su anchura se define en CSS externo a ser "100%", el offsetWidth (y offsetHeight) de este objeto no quede calculada antes de que todo Javascript en marcha terminado .

Al usar setTimeout(callback, 0), parece que se invoca después de que el navegador finaliza la llamada actual de JavaScript Y se toma el tiempo de aplicar todo el CSS a los nuevos elementos DOM.