Redimensionar / Mover DIVs

[josec89]

Hola!

Estoy creando una librería de efectos de ventana (mover divs, cambiar fondo...) y tengo un problema con el Redimnesionar y el Mover.

Mover:
Si se trata de un div flotante (position: absolute) no hay problema, ya que top, left funcionan correctamente, pero si no es así no se mueve. Para ello he pensado hacer un movimiento relativo (cambiando el valor de los margenes cuando position=relative) y movimiento absoluto (cambiar top, left cuando position=absolute). En principio esto debería funcionar, aunque aún no lo he probado.

Redimensionar:
Para redimensionar una ventana pasa algo aún más complicado: cuando no definimos un tamaño de div, ¿qué tamaño tiene? ¿Existe una función fidedignea que nos diga exactamente cuál es el tamaño de un div?. Yo he estado probando con div.style.offsetHeight/offsetWidth, aunque me daba problemas porque no todos los navegadores reconocían esta propiedad, no siempre existía y no siempre era exactamente.

Resumiendo: ¿Alguien me puede dar una función o explicar el funcionamiento de una función que devolviese el tamaño exacto (W, H) de un div?

Un saludo, gracias

[Panino5001]

Sí, div.offsetHeight/offsetWidth (sin style) funciona bien en todos los navegadores modernos con el doctype adecuado (document.compatMode=CSS1Compat).
Una prueba clásica para comprobar que el navegador utilizará bien eso es esta (la parte de box model compat):

Código:

var domCompatible=function(){
	/*---- dom compat ----*/
	var a=[];
	if(!document.getElementById || !document.createTextNode || !document.createElement || !document.removeChild || !document.createDocumentFragment || !a.push) return false;
	/*---- box model compat ----*/
	var test = document.createElement('div');
	test.style.visibility = 'hidden';
	test.style.width = '100px';
	test.style.padding = '100px';
	document.getElementsByTagName('body')[0].appendChild(test);
	var w = test.offsetWidth || 0;
	if(w!=300) {return false;}
	document.getElementsByTagName('body')[0].removeChild(test);
	return true;
}