Ver Mensaje Individual
  #5 (permalink)  
Antiguo 28/10/2011, 18:29
Avatar de _cronos2
_cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 10 meses
Puntos: 310
Respuesta: esto es payta gente que le gusta programar en javascript un reto personal

Pido disculpas por no hacer un quote para cada frase que vaya a citar, pero es que si no no acabo Cito el post completo
Cita:
Iniciado por Raziel_Ravenheart Ver Mensaje
Hola de nuevo Isabel y Jor?

Pues les cuento que hay un modo de acceder a los estilos aplicados a los elementos html, por medio de DOM Nivel 2, ya que si estos no están declarados directamente en la etiqueta (inline o intrusivo como me gusta decirle), y dependemos de estos valores para realizar alguna acción, no apareceran por medio del objeto style es decir

Código Javascript:
Ver original
  1. document.getElementById("algunID").style;

si el objeto no tiene ningún style inline, todos los atributos obtenidos por este medio, apareceran vacios. Para resolver este problema, aprendí que se puede utilizar un objeto DOM perteneciente a document llamado styleSheets, es decir se accede a este por medio de la siguiente sintaxis:

Código Javascript:
Ver original
  1. var estilos = document.styleSheets;

De esa manera la variable estilos guardará una lista de los objetos stylesheet explícitamente enlazados dentro o incrustados en el documento.

yo generalmente utilizo un for...in para observar todos los atributos y métodos(de cualquier elemento, incluso los elementos navegador, ventana, location, aunque con document, no funcionó :S), así:

Código Javascript:
Ver original
  1. var estilo = document.getElementById("algunID").style;
  2. var txt = "";
  3.  
  4. for(x in estilo) {
  5.   txt += x+": "+estilo[x]+"<br />";
  6. }
  7.  
  8. //suponiendo que lo siguiente es un div
  9.  
  10. document.getElementById("idDiv").innerHTML = txt;

Y así hago para conocer todos los atributos y métodos de algún objeto o elemento. Inténtenlo, verán muchas cosas que hasta les parecerán raras y otras interesantes, como por ejemplo url's completas, tipos de archivos y otras cosas. En el caso de styleSheets, pueden obtener la dirección completa de donde se encuentran los archivos css. Lo digo por que ya lo hice.

Otra cosa, no importa si utilizan link rel o @import, se pueden averiguar, pero tengan en cuenta, que @import es otra regla css y buscarlas una por una puede llegar a ser mucho trabajo. Pero de todos modos, este es el único modo de acceder a estilos css, declarados en el encabezado del documento o en un archivo externo, y conocer los valores si necesitamos trabajar con esta información:

Referencias:

En MDN
En javascript kit
En Mundo Geek

Que les aproveche
Bueno, vamos por partes, como diría Jack el destripador.
Para empezar, sí, teóricamente es posible hacer eso como dices. Rescatar los valores de los estilos mediante los declarados en el CSS, sin embargo esto tiene 2 principales inconvenientes:
1.- No es ni mucho menos exacto, ni sencillo. Tienes que recorrer todas las hojas de estilo, y quedarte con el último valor para esa propiedad. Sin embargo, también puede aparecer un !important, e incluso más de uno, por lo que había que comprobar que no los hubiera, y si los hubiera ir guardándolos en una variable aparte para no pisarse con la variable "principal". Y para más INRI, debes usar sólo las reglas que afecten a ese elemento, así que tendrías que usar un selector CSS (como Sizzle) o document.querySelectorAll por cada regla, y después recorrer el NodeList que este devuelve en busca del elemento, lo que viene a ser una ineficiencia de libro.
2.- Supongo yo que será lento, porque hay que recorrer el DOM de la hoja de estilos, y pese a quien le pese el DOM no es un prodigio de la velocidad.

Lo del for ... in, es un bucle especial para recorrer objetos. Si lo que quieres es recorrer algún objeto en concreto y ver todas sus propiedades @caricatos nos facilitó la vida con su maravilloso Destripador.

Por último, la mejor solución a este problema es usar el estilo computado. Como siempre, IE y los que no son IE tienen implementaciones distintas, pero fáciles de conjugar con un if-else dentro de una función getStyle o similar. Lo único que hay que acordarse es que para IE, el computedStyle (o currentStyle según él) de la propiedad float es styleFloat.

Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red