-1

css:

#foo1 { color: #FFF; border: 1px solid #000; }

html:

<div id="foo1"></div>
<div id="foo2"></div>

js:

I know that i can fetch the values one by one using css keys, but is there any way to get all the css properties at once, and apply the values. Something like this:

$(function(){
    $('#foo2').css($('#foo1').css());
});
Johan
  • 35,120
  • 54
  • 178
  • 293
  • This question is repeated, check: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element – Skatox Nov 05 '12 at 16:08

2 Answers2

4

You could make the style into a class and then just use addClass to apply the style to the second div.

.foo-style { color: #FFF; border: 1px solid #000; }

<div id="foo1" class="foo-style"></div>
<div id="foo2"></div>

$(function(){
   $('#foo2').addClass('foo-style');
});
jackpopp
  • 84
  • 2
  • Yes but im asking for a way to get the css properties from an element as an object. Sorry for being unclear – Johan Nov 05 '12 at 16:08
2

This seems to work in jsfiddle, but I would have expected it to work for inline styles only in the wild, but have'nt tested it outside jsFiddle:

$("#foo2").css('cssText', $("#foo1").css('cssText'));

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Yes, but i tried to mentioned that I already know that: "I know that i can fetch the values one by one using css keys" :) – Johan Nov 05 '12 at 17:22
  • @Johan - Did you notice that it actually fetches ALL the CSS values, and not just one by one ? – adeneo Nov 05 '12 at 18:05