jQuery中的克隆样式？答案

【问题标题】：Clone style in jQuery?jQuery中的克隆样式？
【发布时间】：2012-02-07 00:49:02
【问题描述】：

我有一个名为spn1 的<span>，它具有内联+ CSS 文件的一些样式。

我还有另一个<span>，叫做spn2。

如何将spn1 的完整样式克隆到spn2 中？

我希望spn2 看起来与spn1 完全一样（风格上）。

【问题讨论】：

您可以将行为抽象为一个类并将该类应用到所需的元素数量中，或者创建一个元素数组并使用 $.each 遍历它
Duplicating an element (and its style) with JavaScript的可能重复
@AtesGoral 你知道吗？ jquery标签和javascript标签有区别...
@RoyiNamir 是的。该问题的公认答案具有用于复制计算样式的非 jQuery 解决方案。请先看答案。
@AtesGoral 我确实看到了。 jquery 代码仅用于克隆，所有其他代码都是我不想要的 JAVASCRIPt。

标签： jquery

【解决方案1】：

要复制元素上的显式样式集，您可以使用以下方法：

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>

请注意，这不会复制元素的计算样式，即从父元素或全局选择器继承的样式规则。

【讨论】：

出现顺序可能有问题。不是吗？所有的！重要的东西等等.....？
这不会复制计算的样式。除了style 和class 属性之外，还可以有针对一个跨度而不是另一个跨度的CSS 规则（基于不同的文档顺序或层次结构等）

【解决方案2】：

看看这个线程： https://stackoverflow.com/a/6416527/541827
这个想法是将所有样式的属性从一个项目复制到另一个项目

或者直接使用jquery.copycss.js插件，答案基于。
用法：

$('#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

【讨论】：

（不是我）。也许是因为它是一个链接，应该将其粘贴为评论。
或者只是将问题作为重复项关闭。

【解决方案3】：

jQuery 没有任何直接的工具可以做到这一点。您将不得不使用普通的旧 JavaScript 来找到一种跨浏览器的方式来将一个元素的 计算样式 复制到另一个元素。 This answer 有一个潜在解决方案的实现。

【讨论】：

【解决方案4】：

试试这个：

document.getElementById("spn2").style = document.getElementById("spn1").style;

【讨论】：

【解决方案5】：

更新

检查这个小提琴：http://jsfiddle.net/9BJ5y/

更好的办法是克隆 spn1 并用它替换 spn2。

即类似：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

你不只是做 .clone(true) 有什么原因吗？

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

此示例复制内联样式和类样式，但不复制 id 样式（这可能非常有用）。

【讨论】：

但是很容易修复（就像刚刚做的那样），而且比上述所有方法都省事。我只是想知道为什么到目前为止这种方法一直被忽略。
好吧，.clone(true) 还克隆了项目的 HTML，而我们需要的是将一个项目的样式应用到另一个已经存在的项目。

【解决方案8】：

如果您只想要 CSS，您可以执行以下操作：

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

然后您可以将其应用于任何新元素。

【讨论】：

【解决方案9】：

为什么当时不对这两个元素应用任何规则？

类似：

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

你可以使用多个选择器http://api.jquery.com/multiple-selector/

【讨论】：

spn2 是在未来某个时间动态创建的
哦，我明白了，好吧，这就是我要做的： 1) 确保它们具有相同的类，以便它们具有共同的祖先，并尽可能减少 jQuery 的负载。 2) 您添加到“spn1”的所有其他样式都将存储在“样式”属性中，您可以将其从 spn1 中拉出并将其应用于 spn2，如下所示： var styleHolder = $('spn1').attr( '风格'）; $('spn2').attr('style', styleHolder);这会将所有 JS 样式修改从一个复制到另一个。