怎么将元素的计算样式返回给伪克隆元素的jQueryCSS插件？

Question

将元素的计算样式返回给伪克隆元素的jQueryCSS插件？我正在寻找一种使用jQuery返回第一个匹配元素的计算样式对象的方法。然后，我可以将这个对象传递给jQuery的CSS方法的另一个调用。例如，用宽度，我可以做以下操作，使两个div具有相同的宽度：$('#div2').width($('#div1').width());如果我能使文本输入看起来像现有的跨度:$('#input1').css($('#span1').css());不带参数的.css()返回可以传递给.css(Obj).(我找不到一个jQuery插件，但它似乎应该存在。如果它不存在，我将把下面的插件变成一个插件，并将它与我使用的所有属性一起发布。)基本上，我想要伪克隆某些元素但是使用不同的标签..例如，我有安莉元素，我想隐藏，并将一个输入元素放在上面，看起来是一样的。当用户输入时，看起来他们是在内联地编辑元素。.对于这个伪克隆问题，我也愿意使用其他方法进行编辑。有什么建议吗？这是我目前所拥有的。唯一的问题是得到所有可能的样式。这可能是一长得离谱的名单。jQuery.fn.css2 = jQuery.fn.css;jQuery.fn.css = function() {     if (arguments.length) return jQuery.fn.css2.apply(this, arguments);     var attr = ['font-family','font-size','font-weight','font-style','color',     'text-transform','text-decoration','letter-spacing','word-spacing',     'line-height','text-align','vertical-align','direction','background-color',     'background-image','background-repeat','background-position',     'background-attachment','opacity','width','height','top','right','bottom',     'left','margin-top','margin-right','margin-bottom','margin-left',     'padding-top','padding-right','padding-bottom','padding-left',     'border-top-width','border-right-width','border-bottom-width',     'border-left-width','border-top-color','border-right-color',     'border-bottom-color','border-left-color','border-top-style',     'border-right-style','border-bottom-style','border-left-style','position',     'display','visibility','z-index','overflow-x','overflow-y','white-space',     'clip','float','clear','cursor','list-style-image','list-style-position',     'list-style-type','marker-offset'];     var len = attr.length, obj = {};     for (var i = 0; i < len; i++)          obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);     return obj;}编辑：我已经使用上述代码一段时间了。它工作得很好，行为与原来的CSS方法完全一样，只有一个例外：如果传递了0 args，它将返回计算样式对象。如您所见，如果应用的是原来的CSS方法，它会立即调用该方法。否则，它将获取所有列出的属性的计算样式(从Firebug的计算样式列表中收集)。虽然它得到了一长串的值，但速度相当快。希望它对别人有用。

Answer 1

这不是jQuery，但在Firefox、Opera和Safari中，您可以使用window.getComputedStyle(element)要获得元素的计算样式，在IE<=8中，可以使用element.currentStyle..在每种情况下，返回的对象都是不同的，我不确定这两种方法对使用Javascript创建的元素和样式的工作效果有多好，但也许它们会很有用。

在Safari中，您可以执行以下操作：

document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;

Answer 2

我不知道你对到目前为止得到的答案是否满意，但我不满意，我的答案也可能不会让你满意，但它可能会帮助其他人。

经过思考如何“克隆”或“复制”元素的风格从一个到另一个，我已经认识到，它不是非常理想的方法，通过n和应用于N2，但我们还是坚持这一点。

当您发现自己面临这些问题时，您很少需要将所有样式从一个元素复制到另一个元素。你通常有一个特定的理由想要“一些”风格的应用。

以下是我回到的内容：

$.fn.copyCSS = function( style, toNode ){
  var self = $(this);
  if( !$.isArray( style ) ) style=style.split(' ');
  $.each( style, function( i, name ){ toNode.css( name, self.css(name) ) } );
  return self;}

您可以将一个以空格分隔的css属性列表作为第一个参数传递给它，并将希望克隆它们的节点作为第二个参数传递给它，如下所示：

$('div#copyFrom').copyCSS('width height color',$('div#copyTo'));

在那之后，不管其他看起来“不对齐”的地方，我都会尝试用样式表来修正，这样我的Js就不会被太多错误的想法弄得乱七八糟。