jQuery將新創建的元素設置為動態元素的當前樣式

Question

我有一個元素，出於通信目的，我們將其稱為$elA ，它在運行時通過.animate()更改了一些CSS屬性。

例如：

$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
});

當某個事件稍后在代碼中觸發時，我需要創建$elA的克隆。 出於通信目的，我們將此稱為$elB 。

在此事件中我該如何做類似於$elB.css = $elA.css事情？ 它不必是jQuery方法，也可以是沒有問題，我只是不確定是否存在一種優雅的方式來處理這種情況，即沒有與之關聯的當前類，因為DOM的屬性我希望克隆的元素在工作表的任何地方都不存在。

謝謝。

Answer 1

使用jQuery的.clone()方法。 它執行匹配元素集的深層復制，這意味着它將復制匹配元素及其所有后代元素和文本節點。

如果使用JavaScript，則以下內容將有助於將樣式僅復制到另一個元素。

 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> 

Answer 2

如果您只需要克隆樣式，則可以使用如下函數：（Fiddle hier： https : //jsfiddle.net/taxostd0/2/ ）

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

然后這樣稱呼它：

copyStyles($elA[0], $elB[0]);