terça-feira, 18 de dezembro de 2007

Como obter a largura e a altura de Divs liquidos

Obter os atributos width e height de Divs absolutos é muito simples. A coisa começa a ficar complicada quando seu Div não possui uma altura e uma largura fixa, se comportando de acordo com o restante da página. Encontrei em alguns blogs diversas dicas de como fazer isso. Alguns só funcionavam no Firefox, outros só no Internet Explorer, nenhum em ambos.

Com essas informações então criei as funções getWidth e getHeight que retornam a largura e altura de um div, mesmo que está seja fluída:

function getHeight(d) {
if( document.all ) {
return eval( "document.all." + d.id + ".offsetHeight" );
} else {
return parseInt( getStyle(d,"height") );
}
}

function getWidth(d) {
if( document.all ) {
return eval( "document.all." + d.id + ".offsetWidth" );
} else {
return parseInt( getStyle(d,"width") );
}
}

function getStyle(el, style) {
if(!document.getElementById) return;
if( window.getComputedStyle ) {
value = document.defaultView.getComputedStyle(el, "").getPropertyValue(style);
} else if(document.defaultView) {
value = document.defaultView.getComputedStyle(el, "").getPropertyValue(style);
} else if(el.currentStyle) {
value = el.currentStyle[style];
}
return value;
}


Para usá-las é só chamar enviando por parâmetro um objeto div. Veja o exemplo:

var d = document.getElementById("meuDiv");
alert( getWidth( d ) );
alert( getHeight( d ) );


Testei essas funções com o Firefox 2, IE 7 e o Safari 3.

Um comentário: