Consultar atributos de una clase de una hoja de estilo en javascript

[Kai_Rainer]

hola, tengo un pequeño problema, el cual no consigo solucionar, a ver si me podeis hechar una mano.

Quiero leer los atributos de una hoja css ya cargada en la pagina, ej:

Código:

.ejemplo {
width: 200px;
height: 100px;
}

Bien, ahora quiero en javascript leer esos atributos y no lo consigo. He intentado:

Código:

#ejemplo {
width: 200px;
height: 100px;
}

Código HTML:

alert(document.getElementById('ejemplo').style.width);
/* Creando un div tambien con la id del css para que tome los atributos */

La alerta me devuelve un valor vacio, si le escribo un valor despues de la alerta y la vuelvo a llamar me da el valor que le escribo como valor.

[zerokilled]

¡buenas!
no está muy claro que exactamente quieres hacer, si leer el valor computado de un elemento o si trabajar directamente con las reglas de una hoja de estilo. me explico... cuando lees el objeto style desde un elemento, style representa un objeto CSSStyleDeclaration en base al atributo style del elemento. de modo que si no tienes ningún atributo style, todas las propiedades en style están vacías. ahora, tu puedes determinar qué valor tendría las propiedades según las condiciones actuales en como el navegador ha "renderizado" el elemento. para ello, puedes utilizar la función getComputedStyle; para iexplorer utilizas la propiedad currentStyle en lugar de style. en todo caso, en ninguna de las dos formas puedes modificar el valor computado, pues las propiedades son read-only.

si realmente quieres trabajar con la hoja de estilo, entonces tienes que usar la interfaz document.styleSheets. dicho objeto es una lista de todas las hojas de estilos cargada en el documento. cada una de las hojas de estilos muestra las reglas definidas y sus propiedades. en este método puedes modificar los valores. un ejemplo de como se accesa a la primera regla del primer stylesheets en el documento.

Código:

<!-- asumiendo que este es el primer stylesheet -->
<style type="text/css">
body{
background: black;
color: white;
}
</style>
<script type="text/javascript">
document.styleSheets[0].cssRules[0].style.background = "#9CF";
// styleSheets[0], primera hoja de estilo
// cssRules[0], primera regla de la hoja
// style, declaracion de las propiedades css
</script>

[Kai_Rainer]

ok, gracias. Si lo que quiero es leerlo solamente, para hacer un calculo restar el valor de la clase que sera la capa oculta, a la resolucion de la ventana. Para asi colocarlo donde quiero, es en la parte derecha de la pantalla asi que tengo que restar para que se vea.

¿Hay alguna manera de usar styleSheets y cssRules de una manera asociativa? me explico, como los arrays asociativos de php

[zerokilled]

en teoría no existe los arrays asociativos en javascript. sin embargo, si puedes usar la misma sintaxis para las propiedades de los objetos. es decir, object.property es exactamente lo mismo que object['property']. de modo que cualquier objeto puedes accesarlo con ambas sintaxis.