To nie jQuery, ale w Firefoksie, Operze i Safari możesz użyć window.getComputedStyle(element), Aby uzyskać obliczone style dla elementu, a w IE element.currentStyle. Zwracane obiekty są różne w każdym przypadku i nie jestem pewien, jak dobrze działają z elementami i stylami utworzonymi za pomocą Javascript, ale być może będą przydatne.

W Safari można wykonać następujące czynności, które są dość schludne:

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

Nie wiem, czy jesteś zadowolony z odpowiedzi, które otrzymałeś do tej pory, ale ja nie byłem i moja może cię nie zadowolić, ale może pomóc komuś innemu.

Po zastanowieniu się nad tym, jak "klonować" lub "kopiować" style elementów od jednego do drugiego, zdałem sobie sprawę, że nie było zbyt optymalne podejście do pętli przez n i zastosowania do n2, ale jakoś utknęliśmy z tym.

Kiedy napotkasz te problemy, rzadko musisz kopiować wszystkie style z jednego elementu do kolejny... zazwyczaj masz konkretny powód, aby zastosować "niektóre" style.

Oto do czego wróciłem:

$.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;
}

Możesz przekazać mu oddzieloną spacjami listę atrybutów css jako pierwszy argument i węzeł, do którego chcesz je sklonować jako drugi argument, tak:

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

Cokolwiek jeszcze wydaje się" źle dopasować " po tym, postaram się naprawić arkusze stylów, aby nie zaśmiecać mojego Js zbyt wieloma błędnymi pomysłami.

Teraz, gdy miałem trochę czasu, aby przyjrzeć się problemowi i lepiej zrozumieć, jak działa wewnętrzna metoda css jQuery, to, co opublikowałem, wydaje się działać wystarczająco dobrze dla przypadku użycia, o którym wspomniałem.

Zaproponowano, że możesz rozwiązać ten problem za pomocą CSS, ale myślę, że jest to bardziej uogólnione rozwiązanie, które będzie działać w każdym przypadku bez konieczności dodawania klas usuwania lub aktualizacji css.

Mam nadzieję, że inni uznają to za przydatne. Jeśli znajdziesz pluskwę, daj mi znać.

Podoba mi się Twoja odpowiedź Quickredfox. Musiałem skopiować jakiś CSS, ale nie od razu, więc zmodyfikowałem go, aby "toNode" był opcjonalny.

$.fn.copyCSS = function( style, toNode ){
  var self = $(this),
   styleObj = {},
   has_toNode = typeof toNode != 'undefined' ? true: false;
 if( !$.isArray( style ) ) {
  style=style.split(' ');
 }
  $.each( style, function( i, name ){ 
  if(has_toNode) {
   toNode.css( name, self.css(name) );
  } else {
   styleObj[name] = self.css(name);
  }  
 });
  return ( has_toNode ? self : styleObj );
}

Jeśli nazwiesz to tak:

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

Następnie zwróci obiekt z deklaracjami CSS, których możesz użyć później:

{
 'width': '140px',
 'height': '860px',
 'color': 'rgb(238, 238, 238)'
}

Multipurpose .css()

Użycie

$('body').css();        // -> { ... } - returns all styles
$('body').css('*');     // -> { ... } - the same (more verbose)
$('body').css('color width height')  // -> { color: .., width: .., height: .. } - returns requested styles
$('div').css('width height', '100%')  // set width and color to 100%, returns self
$('body').css('color')  // -> '#000' - native behaviour

Kod

(function($) {

    // Monkey-patching original .css() method
    var nativeCss = $.fn.css;

    var camelCase = $.camelCase || function(str) {
        return str.replace(/\-([a-z])/g, function($0, $1) { return $1.toUpperCase(); });
    };

    $.fn.css = function(name, value) {
        if (name == null || name === '*') {
            var elem = this.get(0), css, returns = {};
            if (window.getComputedStyle) {
                css = window.getComputedStyle(elem, null);
                for (var i = 0, l = css.length; i < l; i++) {
                    returns[camelCase(css[i])] = css.getPropertyValue(css[i]);
                }
                return returns;
            } else if (elem.currentStyle) {
                css = elem.currentStyle;
                for (var prop in css) {
                    returns[prop] = css[prop];
                }
            }
            return returns;
        } else if (~name.indexOf(' ')) {
            var names = name.split(/ +/);
            var css = {};
            for (var i = 0, l = names.length; i < l; i++) {
                css[names[i]] = nativeCss.call(this, names[i], value);
            }
            return arguments.length > 1 ? this : css;
        } else {
            return nativeCss.apply(this, arguments);
        }
    }

})(jQuery);

Główna idea pochodzi z & odpowiedzi HexInteractive.

Świetna funkcja dostarczona przez OP. lekko ją zmodyfikowałem, abyś mógł wybrać, które wartości chcesz zwrócić.

(function ($) {
    var jQuery_css = $.fn.css,
        gAttr = ['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'];
    $.fn.css = function() {
        if (arguments.length && !$.isArray(arguments[0])) return jQuery_css.apply(this, arguments);
        var attr = arguments[0] || gAttr,
            len = attr.length,
            obj = {};
        for (var i = 0; i < len; i++) obj[attr[i]] = jQuery_css.call(this, attr[i]);
        return obj;
    }
})(jQuery);

Wybierz wartości, które chcesz, podając własną tablicę: $().css(['width','height']);

Chciałem tylko dodać rozszerzenie do kodu zgłoszonego przez Dakotę.

Jeśli chcesz sklonować element ze wszystkimi zastosowanymi stylami i wszystkimi elementami potomnymi, możesz użyć następującego kodu:

/*
 * 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<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }


    $.fn.cloneWithCSS = function() {
        styles = {};

        $this = $(this);
        $clone = $this.clone();
        $clone.css( $this.getStyleObject() );

        children = $this.children().toArray();
        var i = 0;
        while( children.length ) {
            $child = $( children.pop() );
            styles[i++] = $child.getStyleObject();
            $child.children().each(function(i, el) {
                children.push(el);
            })
        }

        cloneChildren = $clone.children().toArray()
        var i = 0;
        while( cloneChildren.length ) {
            $child = $( cloneChildren.pop() );
            $child.css( styles[i++] );
            $child.children().each(function(i, el) {
                cloneChildren.push(el);
            })
        }

        return $clone
    }

})(jQuery);

Wtedy możesz po prostu zrobić: $clone = $("#target").cloneWithCSS()

$.fn.cssCopy=function(element,styles){
var self=$(this);
if(element instanceof $){
    if(styles instanceof Array){
        $.each(styles,function(val){
            self.css(val,element.css(val));
        });
    }else if(typeof styles===”string”){
        self.css(styles,element.css(styles));
    }
}
return this;
};

Użyj przykładu

$("#element").cssCopy($("#element2"),['width','height','border'])