blocks|key|2528829|text|看看这个帖子：https://stackoverflow.com/a/6416527/541827|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2528830|其思想是将样式的所有属性从一个项目复制到另一个项目|2528831|或者只是使用jquery.copycss.js插件，答案是基于。|2528832|用法：|2528833|$('#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|code-block|syntax|javascript|2528834|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/6416527/541827|1|https://github.com/moagrius/copycss^0|7|16|0|0|0|6|H|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

Take a look at this thread:
<a href="https://stackoverflow.com/a/6416527/541827">https://stackoverflow.com/a/6416527/541827</a> 
The idea is to copy all the style's properties from one item to another

Or just use the <a href="https://github.com/moagrius/copycss" rel="nofollow noreferrer">jquery.copycss.js</a> plugin, the answer is based on. 
Usage:

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

blocks|key|48131|text|要复制元素上的显式样式集，可以使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|48132|​|48133|let+$original+=+$('#spn1');
let+$target+=+$('#spn2');

$target
++.prop("style",+$original.attr("style"))
++.addClass($original.attr("class"));|code-block|syntax|javascript|48134|.foo+{+color:+#F00;+}|48135|<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+id="spn2">Plain+by+default|48136|48137|请注意，这不会复制元素的计算样式，即从父元素或全局选择器继承的样式规则。|48138|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

To copy the explicit styling set on an element you can use this method:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let $original = $('#spn1');
let $target = $('#spn2');

$target
 .prop("style", $original.attr("style"))
 .addClass($original.attr("class"));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.foo { color: #F00; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;span id="spn1" class="foo" style="background-color: #FF0;"&gt;Styled by default&lt;/span&gt;
&lt;span id="spn2"&gt;Plain by default&lt;/span&gt;</code></pre>
</div>
</div>

Note that this will not copy the computed style of an element, i.e. style rules inherited from parent elements or global selectors.

blocks|key|48600|text|jQuery没有任何直接的工具来做这件事。您将不得不使用普通的老式JavaScript来找到一种跨浏览器的方法来将一个元素的计算样式复制到另一个元素。This+answer有一个潜在解决方案的实现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|48601|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/1848489/23501^0|1Q|4|23|B|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

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 style of one element to another. <a href="https://stackoverflow.com/a/1848489/23501">This answer</a> has an implementation for a potential solution.

blocks|key|2528870|text|尝试使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2528871|document.getElementById("spn2").style+=+document.getElementById("spn1").style;|code-block|syntax|javascript|2528872|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try using this:

<pre><code>document.getElementById("spn2").style = document.getElementById("spn1").style;
</code></pre>

blocks|key|2528679|text|更新|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2528680|检查这个小提琴：http://jsfiddle.net/9BJ5y/|2528681|2528682|更好的办法是克隆spn1并用它替换spn2。|2528683|例如，类似于：|2528684|var+x+=+$('#spn2').html();
$('#spn2').replaceWith($('#spn1').clone().html(x).attr('id',+'spn2'));|code-block|syntax|javascript|2528685|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9BJ5y/^0|0|2|0|8|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|H|3|-4|5|6|7|16|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|17|8|@]|D|@]|E|$]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|19|8|@]|D|@]|E|$P|Q]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

UPDATE

Check this fiddle: <a href="http://jsfiddle.net/9BJ5y/" rel="nofollow">http://jsfiddle.net/9BJ5y/</a>

<hr>

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

i.e. something like:

<pre><code>var x = $('#spn2').html();
$('#spn2').replaceWith($('#spn1').clone().html(x).attr('id', 'spn2'));
</code></pre>

blocks|key|2528687|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2528688|<div+style='background-color:red;+display:hidden'+id='template'>
++++Something
</div>|code-block|syntax|javascript|2528689|2528690|var+replica=$('#template').clone();
replica
.removeAttr('id')
.css('display',+'block')
.find('span').text('Whatever');
replica.appendTo('#container');|2528691|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<pre><code>&lt;div style='background-color:red; display:hidden' id='template'&gt;
 &lt;span&gt;Something&lt;/span&gt;
&lt;/div&gt;
</code></pre>



<pre><code>var replica=$('#template').clone();
replica
.removeAttr('id')
.css('display', 'block')
.find('span').text('Whatever');
replica.appendTo('#container');
</code></pre>

blocks|key|49495|text|你有没有理由不简单地做.clone(真的)？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|49496|http://jsfiddle.net/johncmolyneux/6Fz84/|offset|length|49497|此示例复制内联和类样式，但不复制id样式(这可能非常有用)。|49498|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

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

<a href="http://jsfiddle.net/johncmolyneux/6Fz84/" rel="nofollow">http://jsfiddle.net/johncmolyneux/6Fz84/</a>

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

blocks|key|48262|text|如果您只需要CSS，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|48263|let+cssText+=+document.defaultView.getComputedStyle(+$("#elementID"),+"").cssText;|code-block|syntax|javascript|48264|然后，您可以将其应用于任何新元素。|48265|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>let cssText = document.defaultView.getComputedStyle( $("#elementID"), "").cssText;
</code></pre>

Then you can apply that to any new element.

blocks|key|2738627|text|为什么不同时对这两个元素应用任何规则呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2738628|类似于：|2738629|$('spn1','spn2').css({color:+'red'});|code-block|syntax|javascript|2738630|您可以使用多个选择器http://api.jquery.com/multiple-selector/|offset|length|2738631|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/multiple-selector/^0|0|0|0|A|14|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Why not applying whatever rules to both elements at the time? 

Something like:

<pre><code>$('spn1','spn2').css({color: 'red'});
</code></pre>

You could use multiple selectors <a href="http://api.jquery.com/multiple-selector/" rel="nofollow">http://api.jquery.com/multiple-selector/</a>

I have a <code>&lt;span&gt;</code> called <code>spn1</code>, which has some style from inline + CSS file.

I have another <code>&lt;span&gt;</code> called <code>spn2</code>.

How can I clone <code>spn1</code>'s complete style into <code>spn2</code>?

I want <code>spn2</code> to look exactly (in style) like <code>spn1</code>.

Clone style in jQuery?

jQuery

我有一个名为spn1的，它有一些来自inline + CSS文件的样式。我还有另一个名为spn2的。如何将spn1的complete样式克隆到spn2中我希望spn2看起来(在风格上)完全像spn1。

问jQuery中的克隆风格？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery中的克隆风格？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery中的克隆风格？
EN