Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Consultar atributos de una clase de una hoja de estilo en javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/03/2012, 12:18
Avatar de Kai_Rainer  
Fecha de Ingreso: abril-2008
Ubicación: 1 de las 7 islas
Mensajes: 37
Antigüedad: 10 años, 3 meses
Puntos: 1
Consultar atributos de una clase de una hoja de estilo en javascript

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.
  #2 (permalink)  
Antiguo 18/03/2012, 12:39
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 9 años, 3 meses
Puntos: 1485
Respuesta: Consultar atributos de una clase de una hoja de estilo en javascript

¡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>
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 18/03/2012, 12:54
Avatar de Kai_Rainer  
Fecha de Ingreso: abril-2008
Ubicación: 1 de las 7 islas
Mensajes: 37
Antigüedad: 10 años, 3 meses
Puntos: 1
Respuesta: Consultar atributos de una clase de una hoja de estilo en javascript

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
  #4 (permalink)  
Antiguo 18/03/2012, 13:03
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 9 años, 3 meses
Puntos: 1485
Respuesta: Consultar atributos de una clase de una hoja de estilo en javascript

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Etiquetas: atributos, clase, consultar, estilo, hoja
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:25.