jQuery 中的克隆样式?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8806144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 11:04:21  来源:igfitidea点击:

Clone style in jQuery?

jquery

提问by Royi Namir

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

我有一个<span>叫做spn1,它有一些来自内联 + CSS 文件的样式。

I have another <span>called spn2.

我还有一个<span>spn2.

How can I clone spn1's completestyle into spn2?

我如何可以克隆spn1完整的风格融入spn2

I want spn2to look exactly (in style) like spn1.

我想spn2看起来完全(风格)像spn1.

采纳答案by Oleg Grishko

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

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

Or just use the jquery.copycss.jsplugin, the answer is based on.
Usage:

或者只是使用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

回答by Rory McCrossan

Try this:

尝试这个:

$("#spn2").attr("style", $("#spn1").attr("style"))
    .addClass($("#spn1").attr("class"));

回答by Ates Goral

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 styleof one element to another. This answerhas an implementation for a potential solution.

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

回答by Andrei

Try using this:

尝试使用这个:

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

回答by Adam Neuwirth

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

如果您只想要 CSS,您可以执行以下操作:

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

Then you can apply that to any new element.

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

回答by techfoobar

UPDATE

更新

Check this fiddle: http://jsfiddle.net/9BJ5y/

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



Better idea would be clone spn1 and replace spn2 with it.

更好的主意是克隆 spn1 并用它替换 spn2。

i.e. something like:

即类似:

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

回答by Hyman-all-trades

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

回答by Reinstate Monica Cellio

Is there a reason you're not simply doing .clone(true)?

是否有理由不简单地执行 .clone(true)?

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

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

This example copies inline and class styles, but not id styles (which could be very useful).

此示例复制内联和类样式,但不复制 id 样式(这可能非常有用)。

回答by leopic

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/

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