Est-ce que jQuery peut obtenir tous les styles CSS associés à un élément?

Question

Existe-t-il un moyen dans jQuery d'obtenir tous les CSS d'un élément existant et de les appliquer à un autre sans les lister tous?

Je sais que cela fonctionnerait s'ils étaient un attribut de style avec attr() , mais tous mes styles sont dans une feuille de style externe.

Answer 1

Quelques années en retard, mais voici une solution qui récupère à la fois le style en ligne et le style externe:

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

Passez un objet jQuery dans css () et il renverra un objet, que vous pourrez ensuite réinsérer dans $ (). Css () de jQuery, ex:

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

:)

Answer 2

Deux ans de retard, mais j'ai la solution que vous cherchez. Pas l'intention de prendre le crédit de l' auteur original, voici un plugin que j'ai trouvé fonctionne exceptionnellement bien pour ce que vous avez besoin, mais obtient tous les styles possibles dans tous les navigateurs, même IE.

Avertissement: Ce code génère beaucoup de sortie, et doivent être utilisés avec parcimonie. Il n'a pas seulement des copies de tous les types de propriétés CSS, mais aussi tous les fournisseurs de propriétés CSS pour que le navigateur.

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);

Utilisation de base est assez simple, mais il a écrit une fonction pour que ainsi:

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

Espérons que cela aide.

Answer 3

Pourquoi ne pas utiliser .style de l'élément DOM ? C'est un objet qui contient des membres tels que width et backgroundColor .

Answer 4

solution de @marknadal n’a pas été saisissant des propriétés de trait d’Union pour moi (par exemple ), mais en changeant le premier boucle `` fait le travail, et j’ai l’impression effectue moins d’itérations :

Une boucle plutôt que récupère plutôt que