¿puedo usar console/alert/some-other-means para leer TODAS las propiedades de CSS a la vez?

Question

Estoy intentando depurar un sitio en el iPad. En el escritorio, un elemento muestra que en el iPad falta.

Pregunta:
¿Hay una manera de salida de todos los CSS en una declaración similar a

console.log($('element').attr('class')); 

o es la única manera de encontrar la propiedad defectuosa que pasar por todos los CSS-reglas una por una ?

console.log($('element').css('position')) 
console.log($('element').css('top')) 
console.log($('element').css('left')) 
console.log($('element').css('right')) 
console.log($('element').css('bottom')) 
console.log($('element').css('width')) 
console.log($('element').css('height')) 
console.log($('element').css('display')) 
... you get the point... 

Gracias por la entrada

Answer 1

Se necesitan window.getComputedStyle:

getComputedStyle() da los valores utilizados finales de todos los CSS propiedades de un elemento.

Compatible con todos los navegadores modernos (incluido IE9).

Un ejemplo sencillo:

var style = window.getComputedStyle($('element').get(0), null); 

jsFiddle Demo

Answer 2

Css jQuery() funciona mejor que .getComputedStyle, ya que representa la diferencia navegador (y se basa en getComputedStyle sí mismo), ver http://api.jquery.com/css/

ver how to get all the calculated styles of an element with jQuery? y acreditar la respuesta allí :)

Answer 3

Aquí hay un pequeño complemento que agrega $ .fn.computedCSS() se puede utilizar para obtener lo que otros ya han sugerido:

Código:

(function($) { 
    $.fn.computedCSS = function() { 
     var elem = $(this)[0]; 
     var styles = window.getComputedStyle(elem); 
     var computed = {}; 
     for (key in styles) { 
      if (!key.match(/^\d+$/) && typeof styles[key] !== 'function') { 
       computed[key] = styles[key]; 
      } 
     } 
     return computed; 
    }; 
})(jQuery); 

Demostración:

http://jsfiddle.net/Kd6xR/

Answer 4

Es mucho más fácil de usar alguna herramientas para inspeccionar remotamente la página en el iPad. iOS 6 tendrá esto incorporado, pero eso no ayuda mucho ahora. Si está en una Mac, puede probar iWebInspector junto con el SDK de iOS. Si no, puedes ver WeInRe.

1. Instalar iOS SDK (libre) y iWebInspector
2. abierto iWebInspector
3. Haga clic en "Abrir simulador de iOS"
4. Cambiar al iPad a través del menú Herramientas -> Dispositivo -> iPad
5. Abra Safari e ir la página que desea depurar
6. Haga clic en "Cargar desde Safari" de nuevo en iWebInspector, y eligió la página
7. ahora debe obtener la WebKit depurador dentro iWebInspector

WeInRe (Webkit inspector remoto) debería funcionar en cualquier plataforma sin la necesidad de iOS SDK. No funciona tan bien como los depuradores reales, ya que solo inyecta una secuencia de comandos y solo tiene acceso a lo que obtienes a través de JavaScript. Pero es mucho más fácil que imprimir todo el css programáticamente;) A veces, WeInRe no capta los cambios en el DOM después de haber examinado un elemento. Así que espere hasta que el DOM esté en el estado que desea observar antes de expandir el elemento padre. WeInRe se aloja amablemente en PhoneGap: debug.phonegap.com, o puede instalarse en su computadora http://phonegap.github.com/weinre/