Clone style in jQuery?

Question

I have a called spn1, which has some style from inline + CSS file.

I have another called spn2

Answer 1

UPDATE

Check this fiddle: http://jsfiddle.net/9BJ5y/

---

Better idea would be clone spn1 and replace spn2 with it.

i.e. something like:

var x = $('#spn2').html();
$('#spn2').replaceWith($('#spn1').clone().html(x).attr('id', 'spn2'));

Answer 2

Is there a reason you're not simply doing .clone(true)?

http://jsfiddle.net/johncmolyneux/6Fz84/

This example copies inline and class styles, but not id styles (which could be very useful).

Answer 3

Why not applying whatever rules to both elements at the time?

Something like:

$('spn1','spn2').css({color: 'red'});

You could use multiple selectors http://api.jquery.com/multiple-selector/

Answer 4

Try this:

$("#spn2").attr("style", $("#spn1").attr("style"))
    .addClass($("#spn1").attr("class"));

Answer 5

<div style='background-color:red; display:hidden' id='template'>
    <span>Something</span>
</div>

var replica=$('#template').clone();
replica
.removeAttr('id')
.css('display', 'block')
.find('span').text('Whatever');
replica.appendTo('#container');

Answer 6

Take a look at this thread: https://stackoverflow.com/a/6416527/541827
The idea is to copy all the style's properties from one item to another

Or just use the jquery.copycss.js plugin, the answer is based on.
Usage:

$('#some-element').copyCSS('#another-element');  // copy all styles
$('#some-element').copyCSS('#another-element', ['top', 'left']);  // copy just top and left
$('#some-element').copyCSS('#another-element', null, ['top', 'left']);  // copy everything except top and left