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

css, javascript, jquery

Solution

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

Problem

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

Original source

Related problems