Veamos. Cuando a un elemento le asignás un estilo inline con el atributo html style. Ejemplo:
Código PHP:
<div id="juan" style="width:500px"></div>
Entonces podés usar, para que te devuelva el ancho algo como esto:
Código PHP:
alert(document.getElementById('juan').style.width);
Y eso funciona. Ahora, si en lugar de asignar el estilo inline, lo asignás con una hoja de estilos o con un elemento <style></style>, eso ya no funciona.
Entonces hay que obtenerlo de otra manera. Lo que pasa es que para Explorer hay que hacerlo de una manera y para el resto de los navegadores de otra.
Explorer lo entiende con:
Código PHP:
document.getElementById('juan').currentStyle[nombrePropiedadCss]
y el resto de los navegadores lo entiende así:
Código PHP:
window.getComputedStyle(document.getElementById('juan'), "").getPropertyValue(nombrePropiedadCss)
Pero también hay que tener cuidado con el nombre de las propiedades. Por ejemplo, la propiedad css background-color para todos los navegadores será (usado con getPropetyValue) background-color, pero para explorer será backgroundColor (sintaxis de camello, es decir, todo pegado y las diferentes palabras con la inicial en mayúscula, excepro la primera).
Pero, si no querés complicarte, definí el estilo inline y listo. Esto, por ejemplo, funciona sin problemas:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> </title>
<script type="text/javascript">
onload=function(){
alert(document.getElementById('pp').style.visibility);
}
</script>
</head>
<body>
<div id="pp" style="visibility:hidden"></div>
</body>
</html>
