Hola el_javi, furoya y caricatos.
Existe un método nativo para poder obtener el valor de los atributos de clase, getPropertyValue, para Mozilla, Firefox y Opera 8, aunque creo que alguna de las ultimas versiones de Opera 7 ya lo soportaba, para que puedas ver información sobre Opera te pongo este
enlace, por otra parte Opera no soporta styleSheets.
Te pongo un ejemplo de como utilizar getPropertyValue:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Estilos</title>
</head>
<style type="text/css">
<!--
div {
position:absolute;
background-color:red;
}
div.clase1{
top:100px;
left:10px;
}
div.clase2{
position:relative;
top:0px;
left:0p;
width:200px;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function current_style(obj,atr){
if (document.defaultView && document.defaultView.getComputedStyle && document.body) {
/* para atributos de estilo de varias palabras Mozilla y Opera, no sigue las mismas reglas de eliminar el guión y poner en mayúscula la primera letra de las palabra que precede al guión, por ejemplo:
* border-top-color en IE sería borderTopColor, mientras que Mozilla y Opera8 se mantiene igual*/
atr = atr.replace(/([A-Z])/g,"-$1").toLowerCase();
return document.defaultView.getComputedStyle(obj ,null ).getPropertyValue(atr );
}
else if (document.body && document.body.currentStyle) {
return obj.currentStyle[atr];
}
}
//-->
</script>
<body>
<div id="n1" class="clase1" onclick="alert(current_style(this,'borderTopColor'))" > CLASE1</div>
<div id="n2" class="clase2" onclick="alert(current_style(this,'width'))" > CLASE2</div>
</body>
</html>
Por otra parte, en Opera y Mozilla te devuelve el valor width y height de un elemento aunque este no este definido por nosotros, pero IE devuelve auto si no esta definido por nosotros, es una pena, ya que sería muy útil.
Hay otras diferencias, por ejemplo el color, si no está definido por nosotros opera e IE devolverá un valor hexadecimal y mozilla en formato rgb, aunque esto tiene solución.
Saludos
