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

possible duplicate: http://stackoverflow.com/questions/2151558/how-to-get-all-the-calculated-styles-of-an-element-with-jquery — Mo Valipour, Jun 15 '12 at 10:59
Check the first answer here: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — Playmaker, Jun 15 '12 at 11:14

kapa · Accepted Answer · 2012-06-15T11:14:57.127

4

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

edited Jun 15 '12 at 11:14

answered Jun 15 '12 at 11:01

kapa

77,694
21
158
175

And of course, to use a jQuery selector: `document.defaultView.getComputedStyle($("element")[0], null)` – h2ooooooo Jun 15 '12 at 11:02

score 2 · Answer 2 · answered Jun 15 '12 at 12:00

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.

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

enter image description here

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/

@frequent Exactly ;) Just like Firebug/Webkit Inspector. But remotely, so you inspect on the device from your computer. — gregers, Jun 15 '12 at 14:40

score 1 · Answer 3 · edited May 23 '17 at 11:44

1

jquery .css() works better than .getComputedStyle as it accounts for browser difference (and is based on getComputedStyle itself), see http://api.jquery.com/css/

see how to get all the calculated styles of an element with jQuery? and credit the answer there :)

edited May 23 '17 at 11:44

Community

1
1

answered Jun 15 '12 at 11:02

Luca

9,259
5
46
59

I don't really get this. First you say that `.css()` is better, and then point to an answer that uses simple `getComputedStyle()`. Also, browser differences don't really matter here, he wants something that works on iPad. I downvote because your answer says nothing but a link to another answer (which should be a flag/comment). – kapa Jun 15 '12 at 11:11
the accepted answer to that question doesn't say to use getComputedStyle() but .css(), anyway I appreciate your suggestion to leave a comment rather than an answer. – Luca Jun 15 '12 at 11:19

score 1 · Answer 4 · answered Jun 15 '12 at 11:35

Here's a small plugin that adds $.fn.computedCSS() you can use to get what others have already suggested:

Code:

(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);

Demo:

http://jsfiddle.net/Kd6xR/

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

4 Answers4

Linked