can I use console/alert/some-other-means to read out ALL CSS properties at once?

Question

I'm trying to debug a site on iPad. On desktop an element shows, on iPad it's missing.

Question:
Is there a way to output all CSS in one statement similar to

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

or is the only way to find the faulty property to go through all CSS-rules one by one?

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...

Thanks for input

Answer 1

You need window.getComputedStyle:

getComputedStyle() gives the final used values of all the CSS properties of an element.

Supported in every modern browser (including IE9).

A simple example:

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

jsFiddle Demo

Answer 2

It's a lot easier to use some tools to remotely inspect the page on the iPad. iOS 6 will get this built in, but that doesn't helpt much now. If you're on a Mac you can try out iWebInspector along with the iOS SDK. If not, you can check out WeInRe.

1. Install iOS SDK (free) and iWebInspector
2. Open iWebInspector
3. Click "Open iOS Simulator"
4. Switch to iPad through the menu Hardware -> Device -> iPad
5. Open Safari and go the page you want to debug
6. Click "Load from Safari" back in iWebInspector, and chose the page
7. You should now get the WebKit debugger inside iWebInspector

WeInRe (Webkit Inspector Remote) should work on any platform without the need for iOS SDK. It doesn't work as well as the real debuggers, since it just injects a scripts and only has access to what you get through javascript. But it's a lot easier than printing out all the css programatically ;) Sometimes WeInRe doesn't catch changes to the DOM after you've looked at an element. So wait until the DOM is in the state you want to look at before expanding the parent element. WeInRe is kindly hosted by PhoneGap: debug.phonegap.com, or can be installed on your computer http://phonegap.github.com/weinre/