2010-11-09 9 views
5

Estoy usando YUI y necesito obtener el ancho verdadero del elemento. El ancho de un elemento se puede determinar de la siguiente manera.YUI - ¿Obtener ancho de elemento verdadero?

ancho + borde-izquierda + borde-derecha + almohadilla-izquierda + almohadilla-derecha + margen-izquierda + margen-derecha.

A continuación se muestra lo que se me ocurrió. Parece estar funcionando. Me preguntaba si esta es la mejor manera de determinar esto o ¿existe una forma más eficiente?

YUI().use('node', function(Y) { 
    var node = Y.one('#nav'); 
    var nodeWidth = trueElementWidth(node); 
    alert(nodeWidth); 
}); 

function trueElementWidth(el) { 
    var width = 0; 
    var attributes = ['border-left', 'border-right', 'padding-left', 'padding-right', 'width', 'margin-right', 'margin-left']; 
    for(var i=0; i < attributes.length; i++) { 
     width = width + removePx(el.getComputedStyle(attributes[i])); 
    } 
    return width; 
} 

function removePx(el) { 
    el = el.toString(); 
    length = el.length - 2; 
    elDimension = parseInt(el.substring(0, length)); 
    return isNaN(elDimension) ? 0 : elDimension; 
} 
+0

Respuesta rápida: vaya a quircksmode.org, solucionan el problema del navegador cruzado allí – Dan

Respuesta

3

No es una propiedad offsetWidth que devuelve exactamente lo que quiere.

+0

offsetWidth no incluye los valores de margen. – wpjmurray

+0

margen no es parte de un elemento, ¿o sí? –

+1

No, no lo es. Supongo que 'offsetWidth' (que solo incluye relleno + borde) no cumple exactamente con las especificaciones del OP pero cumple con sus necesidades. – casablanca

Cuestiones relacionadas