webentwicklung-frage-antwort-db.com.de

Kann jQuery alle mit einem Element verknüpften CSS-Stile abrufen?

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

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

293
alex

Ein paar Jahre zu spät, aber hier ist eine Lösung, die sowohl das Inline-Styling als auch das externe 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 jQueries $().css() einfügen können, z.

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

:)

335
marknadal

Zwei Jahre zu spät, aber ich habe die Lösung, die Sie suchen. Ich habe nicht die Absicht, das Originalautor anzurechnen, hier ist ein Plugin, von dem ich fand, dass es außergewöhnlich gut für das funktioniert, was Sie brauchen, aber es erhält alle mögliche Stile in allen Browsern, auch IE.

Warnung: Dieser Code generiert viel Ausgabe und sollte sparsam verwendet werden. Es kopiert nicht nur alle Standard-CSS-Eigenschaften, 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 dafür hat er auch eine Funktion geschrieben:

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

Ich hoffe, das hilft.

89
Dakota

Warum nicht .style des DOM-Elements ? Es ist ein Objekt, das Elemente wie width und backgroundColor enthält.

16
strager

Ich hatte viele verschiedene Lösungen ausprobiert. Dies war die einzige, die für mich insofern funktioniert hat, als sie Stile aufgreifen konnte, die auf Klassenebene und auf Stile angewendet wurden, die direkt dem Element zugeordnet wurden. Also eine Schriftart auf CSS-Dateiebene und eine als Stilattribut; es gab die korrekte Schriftart zurück.

Es ist einfach! (Sorry, 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];
}
10
Valamas

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

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

Schleifen über length anstatt über in, Werden über getPropertyValue() anstatt über toLowerCase(). abgerufen

4
Brandon Hill