jQuery CSS插件将计算的元素样式返回到伪克隆那个元素？

我正在寻找一种方法,使用jQuery返回第一个匹配元素的计算样式对象.然后我可以将此对象传递给另一个jQuery的css方法调用.

例如,对于宽度,我可以执行以下操作以使2个div具有相同的宽度:

$('#div2').width($('#div1').width());

如果我可以使文本输入看起来像现有的跨度,那将是很好的:

$('#input1').css($('#span1').css());

其中.css()没有参数返回一个可以传递给.css(obj)的对象.

(我找不到这个jQuery插件,但它似乎应该存在.如果它不存在,我将把我的下面变成一个插件并发布它与我使用的所有属性.)

基本上,我想伪克隆某些元素,但使用不同的标记.例如,我有一个我要隐藏的li元素,并在其上放置一个看起来相同的输入元素.当用户键入时,看起来他们正在内联编辑元素.

我也对这种用于编辑的伪克隆问题的其他方法持开放态度.有什么建议？

这就是我现在拥有的.唯一的问题是获得所有可能的样式.这可能是一个荒谬的长名单.

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的计算样式列表中收集).虽然它获得了很长的值列表,但速度非常快.希望它对其他人有用.

迟了两年,但我有你想要的解决方案.这是我写的一个插件(通过以插件格式包装另一个人的功能),它完全符合您的要求,但在所有浏览器中获得所有可能的样式,甚至是IE.

jquery.getStyleObject.js:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for(var i=0;i

基本用法非常简单:

var style = $("#original").getStyleObject(); // copy all computed CSS properties
$("#original").clone() // clone the object
    .parent() // select it's parent
    .appendTo() // append the cloned object to the parent, after the original
                // (though this could really be anywhere and ought to be somewhere
                // else to show that the styles aren't just inherited again
    .css(style); // apply cloned styles


希望有所帮助.

        

2> Richard M..：
这不是jQuery,但是在Firefox,Opera和Safari中你可以window.getComputedStyle(element)用来获取元素的计算样式,你可以使用IE <= 8 element.currentStyle.返回的对象在每种情况下都是不同的,我不确定使用Javascript创建的元素和样式有多好,但也许它们会很有用.

在Safari中,您可以执行以下操作:

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

        

3> Quickredfox..：
我不知道你是否对你到目前为止得到的答案感到满意,但我不是,我的也许不会取悦你,但它可能会帮助别人. 

在思考如何"克隆"或"复制"元素的样式之后,我逐渐意识到,通过n循环并应用于n2的方法并不是非常优化,但是我们有点坚持这个.

当您发现自己面临这些问题时,您很少需要将所有样式从一个元素复制到另一个元素......您通常有一个特定的理由想要应用"某些"样式.

这是我回复的内容:

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


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

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


在此之后,无论其他什么似乎"错位",我都会尝试使用样式表来解决我的Js因为太多错误的想法而混乱的问题.