Kann jQuery alle CSS-Stile abrufen, die einem Element zugeordnet sind?

Gibt es in jQuery eine Möglichkeit, alle CSS von einem vorhandenen Element abzurufen und auf ein anderes anzuwenden, ohne sie alle aufzulisten?

Ich weiß, dass es funktionieren würde, wenn sie ein Stilattribut wären attr(), aber alle meine Stile befinden sich in einem externen Stylesheet.

Ein paar Jahre zu spät, aber hier ist eine Lösung, die sowohl Inline-Styling als auch externes Styling abruft:

function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}

Übergeben Sie ein jQuery-Objekt an css()und es wird ein Objekt zurückgegeben, das Sie dann wieder in jQuery's einbinden können $().css(), z.

var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);

:) :)

Zwei Jahre zu spät, aber ich habe die Lösung, die Sie suchen. Ich habe nicht die Absicht, dem ursprünglichen Autor eine Gutschrift zu geben. Hier ist ein Plugin, das meiner Meinung nach außergewöhnlich gut für Ihre Anforderungen funktioniert, aber alle möglichen Stile in allen Browsern, sogar im Internet Explorer, enthält.

Warnung: Dieser Code generiert viel Ausgabe und sollte sparsam verwendet werden. Es werden nicht nur alle Standard-CSS-Eigenschaften kopiert, sondern auch alle Hersteller-CSS-Eigenschaften für diesen Browser.

jquery.getStyleObject.js:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

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

Die grundlegende Verwendung ist ziemlich einfach, aber er hat auch eine Funktion dafür geschrieben:

$.fn.copyCSS = function(source){
  var styles = $(source).getStyleObject();
  this.css(styles);
}

Hoffentlich hilft das.

Warum nicht .styledas DOM-Element verwenden ? Es ist ein Objekt, das Mitglieder wie widthund enthält backgroundColor.

Ich hatte viele verschiedene Lösungen ausprobiert. Dies war das einzige, das für mich funktioniert hat, da es in der Lage war, Stile aufzunehmen, die auf Klassenebene und auf Stil angewendet wurden, der direkt dem Element zugeordnet wurde. Also eine Schriftart auf CSS-Dateiebene und eine als Stilattribut; Es wurde die richtige Schriftart zurückgegeben.

Es ist einfach! (Entschuldigung, kann nicht finden, wo ich es ursprünglich gefunden habe)

//-- html object
var element = htmlObject; //e.g document.getElementById
//-- or jquery object
var element = htmlObject[0]; //e.g $(selector)

var stylearray = document.defaultView.getComputedStyle(element, null);
var font = stylearray["font-family"]

Alternativ können Sie den gesamten Stil auflisten, indem Sie durch das Array blättern

for (var key in stylearray) {
console.log(key + ': ' + stylearray[key];
}

Die Lösung von @ marknadal hat für mich keine getrennten Eigenschaften erfasst (z. B. max-width), aber das Ändern der ersten forSchleife css2json()hat dazu geführt, dass es funktioniert, und ich vermute, dass weniger Iterationen ausgeführt werden:

for (var i = 0; i < css.length; i += 1) {
    s[css[i]] = css.getPropertyValue(css[i]);
}

Schleifen über lengthstatt in,abrufen über getPropertyValue()statttoLowerCase().