0

I have an element, for communication purposes we'll call $elA which during runtime is having some CSS properties changed via .animate()

for example:

$elA.stop().animate({
    top: `${Math.floor(Math.random()*99)}%`,
    left: `${Math.floor(Math.random()*99)}%`,
    width: '15px',
    height: '15px',
    opacity: '1.0'
    //etc etc etc
});

When a certain event triggers later in the code, I am in need of creating a clone of $elA. For communication purposes lets call this $elB.

How can I do something akin to $elB.css = $elA.css during this event? It doesn't need to be a jQuery method, or it can be there is no problem, I just am not sure if there is an elegant way of handling this case where there is no current class associated with it because the properties for the DOM element I wish to clone doesn't exist in a sheet anywhere.

Thank you.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
simon
  • 854
  • 1
  • 9
  • 23
  • If all else fails, I can manually set each property line by line using .css() but the reason for this post was for a more elegant way to handle this in a dirty one liner. – simon Dec 10 '17 at 10:37
  • jQuery's [`clone()`](https://api.jquery.com/clone/) does not suit your needs? May be with optional `[withDataAndEvents ] [, deepWithDataAndEvents ]`. – Dmitry Dec 10 '17 at 10:38
  • 3
    Possible duplicate of [Clone style in jQuery?](https://stackoverflow.com/questions/8806144/clone-style-in-jquery) – CBroe Dec 10 '17 at 10:42
  • 1
    clone() won't work because I dont want the elements inside of the thing that is being cloned, only the styles. – simon Dec 10 '17 at 10:44
  • You could also try simply reading `style.cssText` from the original and assigning it to the clone, as suggested in this answer here, https://stackoverflow.com/a/6213112/1427878 - that would come as close to the requested "dirty one-liner" as I can imagine, though I have not bothered to check whether that still works in current browsers. – CBroe Dec 10 '17 at 10:44

2 Answers2

1

Use .clone() method of jQuery. It performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements and text nodes.

If using javascript, the following would help to copy just the styles to another element.

document.getElementById("copy2").style.cssText= document.getElementById("copy1").style.cssText;
<div id="copy1" class ="copycss" style="width: 100px; background-color: blue; color: red; font-size: 15;">
10
</div>
<div id="copy2" class ="copycss">
10
</div>
Optimizer
  • 687
  • 7
  • 7
  • i don't want the nested elements, only the style of the parent object, but thank you. – simon Dec 10 '17 at 10:44
  • Gave it to Marouen :P I tried .clone actually and realized that the nested children would be an issue. Ill give ya a 1up though cuz I appreciate any help I can get :) – simon Dec 20 '17 at 21:53
1

if you only need the styles to be cloned you can use a function for it like that: (Fiddle hier: https://jsfiddle.net/taxostd0/2/)

function copyStyles(from, to) {
    var fromStyles = getComputedStyle(from);
    for(prop in fromStyles) {
    to.style[prop] = fromStyles[prop];
  }
}

and then call it like this:

copyStyles($elA[0], $elB[0]);
Marouen Mhiri
  • 1,640
  • 1
  • 14
  • 20