25

Here's how you get one css attribute using jQuery:

$('someObject').css('attribute')

How do you get them all? (without specifying and preferably in the following format so it can be reapplied with jQuery later):

    cssObj = {
        'overflow':'hidden',
        'height':'100%',
        'position':'absolute',
    }

Thanks!!

EDIT

The methods I'm trying to get are declared in a style sheet (they are not inline). Sorry for not specifying.

Kyle Cureau
  • 19,028
  • 23
  • 75
  • 104
  • +1 I thought of asking the same question few days ago –  Oct 19 '10 at 04:29
  • possible duplicate of [Can jQuery get all CSS styles associated with an element?](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) – alex Oct 23 '10 at 00:20
  • So what you're saying is, **Gotta Catch 'Em All**? – Bob Stein Jul 13 '16 at 04:06

5 Answers5

17

See this live example using the jQuery attribute selector

$(document).ready(function() {
    alert($("#stylediv").attr('style'));
});​
jacktheripper
  • 13,953
  • 12
  • 57
  • 93
svk
  • 4,513
  • 18
  • 63
  • 100
  • 3
    @Avinash - So? `.css()` wouldn't pick that up either: http://www.jsfiddle.net/kGkrX/ ---- And this question is trying to get all the CSS properties that would be picked up by `.css()`. --- Getting all the applied styles is a completely different question with a much more difficult answer (Firebug can do it ;) ) – Peter Ajtai Oct 19 '10 at 04:36
  • @peter I'm just trying to say, we just can't get all css properties [ declared in a style tag ], of an element using style attribute –  Oct 19 '10 at 04:43
  • 1
    Yep, that's why i made the comment below. I thought the OP wanted all the CSS attributes (non-inline) applied to an element, in which case neither of these answers would work. But yes, these answers are the equivalent of .css *. – RPM1984 Oct 19 '10 at 04:47
  • @Avinash - The example you point out are not in a style tag. You can get all the css properties declared in an element's style tag using these methods. You cannot get all the css styles applied to an element using these methods. – Peter Ajtai Oct 19 '10 at 04:51
  • 1
    @peter `You can get all the css properties declared in an element's style tag` what does it mean ? you mean `style attribute`. BTW, I'm not too specific about declaring css properties only in a style Tag. I mean declaring other than `inline-style` :) –  Oct 19 '10 at 04:52
  • .css('attribute') grabs the attribute from off of the style sheet even if it's not defined inline. .attr('style') returns 'undefined' for all definitions in the stylesheet. I might be confused, but I need to grab what's in my stylesheet. – Kyle Cureau Oct 19 '10 at 04:55
  • @Avinash - Yeah. I do mean the `style` attribute when I say `style tag`... my bad. --- I see what you want, but the OP is not formatted to include that, since it specifically mentions the functionality of `.css()`. – Peter Ajtai Oct 19 '10 at 05:36
  • 2
    `$('#stylediv').prop('style')` that's all ;) – Eugene Kuzmenko Sep 11 '14 at 10:37
9

What about something like this:

jQuery CSS plugin that returns computed style of element to pseudo clone that element?

It is ugly, but it appeared to work for the poster...

This also may be of interest: https://developer.mozilla.org/en/DOM:window.getComputedStyle

Community
  • 1
  • 1
Andrew M
  • 4,208
  • 11
  • 42
  • 67
  • oh wow that is fugly +1 :) This is probably the answer unless someone has a way that doesn't iterate through all the attributes (which I doubt, considering the discussion on that SO question). Thanks for the heads up on getComputedStyle as well! – Kyle Cureau Oct 19 '10 at 05:15
6

Not sure how cross-browser this one is, but it works in Chrome -

https://gist.github.com/carymrobbins/223de0b98504ac9bd654

var getCss = function(el) {
    var style = window.getComputedStyle(el);
    return Object.keys(style).reduce(function(acc, k) {
        var name = style[k],
            value = style.getPropertyValue(name);
        if (value !== null) {
            acc[name] = value;
        }
        return acc;
    }, {});
};
pyrospade
  • 7,870
  • 4
  • 36
  • 52
1

window.getComputedStyle(element);

// For example
var element = document.getElementById('header');
window.getComputedStyle(element);
Surender Lohia
  • 349
  • 3
  • 12
0

For a platform (the name is subject to nondisclosure) where the Chrome or Safari DevTools/WebInspector are not available, and you need to dump the styles to the log.

  dumpCssFromId (id) {
    const el = document.getElementById(id);
    const styles = window.getComputedStyle(el);
    return Object.keys(styles).forEach((index) => {
      const value = styles.getPropertyValue(index);
      if (value !== null  && value.length > 0) {
        console.log(`style dump for ${id} - ${index}: ${value}`);
      }
    }, {});
  }
spodell
  • 157
  • 12