Ver Mensaje Individual
  #4 (permalink)  
Antiguo 28/10/2011, 17:44
Avatar de Raziel_Ravenheart
Raziel_Ravenheart
 
Fecha de Ingreso: agosto-2011
Ubicación: Ibagué, Tolima
Mensajes: 192
Antigüedad: 13 años, 3 meses
Puntos: 37
Respuesta: esto es payta gente que le gusta programar en javascript un reto personal

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