web-dev-qa-db-fra.com

JQuery peut-il associer tous les styles CSS à un élément?

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'il s'agissait d'un attribut de style avec attr(), mais tous mes styles sont dans une feuille de style externe.

javascriptjquerycss
293
alex

Quelques années de 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 retournera un objet que vous pourrez ensuite reconnecter à la fonction $().css() de jQuery, par exemple:

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

:)

335
marknadal

Deux ans de retard, mais j'ai la solution que vous recherchez. N'ayant pas l'intention de prendre un crédit sous la forme l'auteur original , voici un plugin qui fonctionne exceptionnellement bien pour ce dont vous avez besoin, mais qui obtient all styles possibles dans tous les navigateurs, même IE.

Avertissement: Ce code génère beaucoup de sorties et doit être utilisé avec parcimonie. Il copie non seulement toutes les propriétés CSS standard, mais également toutes les propriétés CSS du fournisseur pour ce 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);

L'utilisation de base est assez simple, mais il a également écrit une fonction pour cela:

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

J'espère que ça t'as aidé.

89
Dakota

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

16
strager

J'avais essayé beaucoup de solutions différentes. C’est le seul qui a fonctionné pour moi dans la mesure où il a été capable de saisir les styles appliqués au niveau de la classe et directement attribués à l’élément. Donc, une police définie au niveau du fichier css et une comme attribut de style; il a renvoyé la police correcte.

C'est simple! (Désolé, je ne trouve pas où je l'ai trouvé à l'origine)

//-- 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"]

Sinon, vous pouvez lister tout le style en parcourant le tableau

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

La solution de @ marknadal ne m'importait pas (par exemple, max-width), mais modifiait la première boucle for de css2json() pour que cela fonctionne, et je suppose qu'il effectue moins d'itérations:

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

Boucles via length plutôt que in, récupère via getPropertyValue() plutôt que toLowerCase().

4
Brandon Hill