请问将元素的计算样式返回给伪克隆元素的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&nbsp;=&nbsp;window.getComputedStyle(document.getElementById('a')).cssText;

Answer 2

我不知道你对到目前为止得到的答案是否满意，但我不满意，我的答案也可能不会让你满意，但它可能会帮助其他人。经过思考如何“克隆”或“复制”元素的风格从一个到另一个，我已经认识到，它不是非常理想的方法，通过n和应用于N2，但我们还是坚持这一点。当您发现自己面临这些问题时，您很少需要将所有样式从一个元素复制到另一个元素。你通常有一个特定的理由想要“一些”风格的应用。以下是我回到的内容：$.fn.copyCSS&nbsp;=&nbsp;function(&nbsp;style,&nbsp;toNode&nbsp;){ &nbsp;&nbsp;var&nbsp;self&nbsp;=&nbsp;$(this); &nbsp;&nbsp;if(&nbsp;!$.isArray(&nbsp;style&nbsp;)&nbsp;)&nbsp;style=style.split('&nbsp;'); &nbsp;&nbsp;$.each(&nbsp;style,&nbsp;function(&nbsp;i,&nbsp;name&nbsp;){&nbsp;toNode.css(&nbsp;name,&nbsp;self.css(name)&nbsp;)&nbsp;}&nbsp;); &nbsp;&nbsp;return&nbsp;self;}您可以将一个以空格分隔的css属性列表作为第一个参数传递给它，并将希望克隆它们的节点作为第二个参数传递给它，如下所示：$('div#copyFrom').copyCSS('width&nbsp;height&nbsp;color',$('div#copyTo'));在那之后，不管其他看起来“不对齐”的地方，我都会尝试用样式表来修正，这样我的Js就不会被太多错误的想法弄得乱七八糟。