32

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

I have another <span> called spn2.

How can I clone spn1's complete style into spn2?

I want spn2 to look exactly (in style) like spn1.

Kaspar Lee
  • 5,446
  • 4
  • 31
  • 54
Royi Namir
  • 144,742
  • 138
  • 468
  • 792
  • You could abstract the behavior to a class and apply that class into the amount of elements needed, or create an array of elements and traverse it using $.each – leopic Jan 10 '12 at 15:56
  • possible duplicate of [Duplicating an element (and its style) with JavaScript](http://stackoverflow.com/questions/1848445/duplicating-an-element-and-its-style-with-javascript) – Ates Goral Jan 10 '12 at 15:57
  • @AtesGoral do you know ? there is a difference between jquery tag and javascript tag ... – Royi Namir Jan 10 '12 at 15:57
  • @RoyiNamir Yes. The accepted answer to that question has a non-jQuery solution for copying the computed style. Please bother yourself with looking at the answer first. – Ates Goral Jan 10 '12 at 15:59
  • @AtesGoral I did see it. the jquery code is just for clone , all the other code is JAVASCRIPt which i do not want. – Royi Namir Jan 10 '12 at 16:00
  • @AtesGoral and there wasnt accepted answer also. – Royi Namir Jan 10 '12 at 16:01
  • @RoyiNamir jQuery doesn't have a solution to every problem. Sometimes you have to resort to plain old JavaScript. – Ates Goral Jan 10 '12 at 18:54
  • 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) – Kaspar Lee May 03 '16 at 10:13

9 Answers9

29

To copy the explicit styling set on an element you can use this method:

let $original = $('#spn1');
let $target = $('#spn2');

$target
  .prop("style", $original.attr("style"))
  .addClass($original.attr("class"));
.foo { color: #F00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span id="spn1" class="foo" style="background-color: #FF0;">Styled by default</span>
<span id="spn2">Plain by default</span>

Note that this will not copy the computed style of an element, i.e. style rules inherited from parent elements or global selectors.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • there can be a problem with the order of appearence.. no ? all the !important stuff etc .....? – Royi Namir Jan 10 '12 at 15:55
  • 6
    This will not copy the computed style. Beyond the `style` and `class` attributes, there can be CSS rules that target one span and not the other (based on different document order or hierarchy etc.) – Ates Goral Jan 10 '12 at 15:57
8

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
Community
  • 1
  • 1
Oleg Grishko
  • 4,132
  • 2
  • 38
  • 52
3

Try using this:

document.getElementById("spn2").style = document.getElementById("spn1").style;
Andrei
  • 31
  • 1
2

jQuery doesn't have any direct facilities for doing this. You will have to use plain old JavaScript to find a cross-browser way to copy over the computed style of one element to another. This answer has an implementation for a potential solution.

Community
  • 1
  • 1
Ates Goral
  • 137,716
  • 26
  • 137
  • 190
0

If you just want the CSS, you can do the following:

let cssText = document.defaultView.getComputedStyle( $("#elementID"), "").cssText;

Then you can apply that to any new element.

Adam Neuwirth
  • 529
  • 5
  • 10
0

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'));
techfoobar
  • 65,616
  • 14
  • 114
  • 135
0

<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');
jack-all-trades
  • 282
  • 1
  • 4
  • 18
0

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).

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
  • But very easy to fix (as just done), and much less hassle than all of the above methods. I'm just wondering why this method has been ignored thus far. – Reinstate Monica Cellio Jan 10 '12 at 16:47
  • 2
    Well, `.clone(true)` clones also the item's HTML, while what we need, is to apply one item's style to another **already existing** item. – Oleg Grishko Jan 10 '12 at 16:56
-1

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/

leopic
  • 2,958
  • 2
  • 27
  • 42
  • spn2 is created dynamically sometime in the future – Royi Namir Jan 10 '12 at 19:38
  • Oh I see, ok so this is what I would do: 1) Make sure they have the same class so they have a common ancestor and reduce the load on jQuery as much as possible. 2) All additional styling that you add to 'spn1' will be stored in the 'style' attribute, you could just pull it it from spn1 and apply it to spn2 like this: var styleHolder = $('spn1').attr('style'); $('spn2').attr('style', styleHolder); That would copy all the JS style modifications from one into the other. – leopic Jan 10 '12 at 19:51