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 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 originaldocument.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 originalvar 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 originalvar estilo = document.getElementById("algunID").style;
var txt = "";
for(x in estilo) {
txt += x+": "+estilo[x]+"<br />";
}
//suponiendo que lo siguiente es un div
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 (: