2

OK, this is probably quite easy, but I cannot find it on Google or stackoverflow.

Instead of

var color = $(div).css('color')

I want to store the css in a variable.

var theCss = $(div).css  
var color = theCss('color')  // no, doesn't work

Is it at all possible? Of course the reason why I want this is much more complicated, so I would be very much helped if there is somehow a way to store

Roemer
  • 1,124
  • 8
  • 23
  • 3
    Have you checked out this link? [Get all CSS using jQuery](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) – user2646829 Sep 09 '14 at 14:31
  • @user2646829 you beat me to it. – DavidT Sep 09 '14 at 14:33
  • 2
    Do you want that `theCss` will always return the actual calculated value of the element or the one the element had at the time you do `var theCss = $(div).css` – t.niese Sep 09 '14 at 14:36
  • @t.niese Good point. The one it had at that time. That makes a big difference, right? The reason I am asking is because I need to find out which CSS elements change when the mouse goes over a A HREF. Don;t ask why - it is complicated. – Roemer Sep 09 '14 at 14:45
  • If you want to compare two states you need to cache those values. Comparing all css properties might be a pain and unnecessary, so you should check if it is really necessary to compare all and only cache those (e.g. like shown in the answer of **[Pointy](http://stackoverflow.com/a/25747220/1960455)**). But it seems that your use-case is that special that most answers would not be _correct_ as they won't fully address your issue. – t.niese Sep 09 '14 at 16:45

2 Answers2

5

It;s a little bit more complicated than you expect, but you can use .bind mixed with $.fn.css. Something like this:

var cssFunc = $.fn.css.bind($('p'));

Then, you can call it like this:

cssFunc('color');

You can also change the css with this method:

cssFunc('color', red);

Fiddle : http://jsfiddle.net/f8yanzsu/

For the browser support, as @dfsq said, you can use $.proxy, the jQuery polyfill of the .bind() function, which is supported by IE 9 and upper.

var cssFunc = $.proxy($.fn.css, $('p'));

Note: This method works for all jQuery methods, not just css.

Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
  • Wow, I would have NEVER found that. Glas I asked here. I hope it works on all browsers, I will test. – Roemer Sep 09 '14 at 14:43
  • 2
    @Roemer It will not work in IE<9. If you need old IE better to go with this: `$.proxy($.fn.css, $('p'))`. – dfsq Sep 09 '14 at 14:44
  • @dfsq out of curiosity, except for the support, is there an other reason to use use `proxy`? – Karl-André Gagnon Sep 09 '14 at 14:46
  • No, only support, as I said. Doesn't make sense to use `$proxy` if there is `.bind`. – dfsq Sep 09 '14 at 14:48
  • Bad thing is, I need to get a COPY of the css, not a link to the original. I need to see what changes are made to the css since I made the copy. So even though the answer = 100% correct, it does not yet provide a solution for me. But with all the help I got here, I will be able to find a second best solution that works. ;) – Roemer Sep 09 '14 at 14:58
  • @Roemer What do you mean a copy of the css? I so not understand what you try to achieve ahah! – Karl-André Gagnon Sep 09 '14 at 15:02
  • I want a time based copy of the CSS. I need to know how the CSS is before the mouse goed over the element. Then when the mouse goes over the element, I want to compare the css of the element to the "backup" and see what has changed. My bad, not yours. PS Don't ask why I want this - it is complicated, but I need it. ;) (I started explaining but it just got too long and complicated.) – Roemer Sep 09 '14 at 15:12
  • @Roemer if you would take the time to explain why you think you need to do this, somebody might be able to suggest a completely different approach to the larger problem you're facing. – Pointy Sep 09 '14 at 16:05
  • That's true, from what i understand, you can do what you want with the Chrome console. – Karl-André Gagnon Sep 09 '14 at 16:09
2

You can't get the sum total of all CSS from jQuery. You can however pass in an array of property names (as of jQuery 1.9) and get back a list of values:

var cssStuff = $(div).css(["color", "fontSize", "width"]);
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 1
    Why was this downvoted, out of curiosity? Who downvotes without providing any explantion; what's even the point? – Pointy Sep 09 '14 at 16:05