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，以下内容将有助于仅将样式复制到另一个元素。

＆＃13;

document.getElementById("copy2").style.cssText= document.getElementById("copy1").style.cssText;

＆＃13;

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

＆＃13;

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]);

jQuery将新创建的元素设置为动态元素的当前样式

2 个答案: