JQuery può ottenere tutti gli stili CSS associati a un elemento?

C’è un modo in jQuery per ottenere tutto il CSS da un elemento esistente e applicarlo a un altro senza elencarli tutti?

So che funzionerebbe se fossero un attributo di stile con attr() , ma tutti i miei stili sono in un foglio di stile esterno.

Un paio di anni di ritardo, ma ecco una soluzione che recupera sia lo stile in linea che lo stile esterno:

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

Passa un object jQuery in css() e restituirà un object, che potrai poi ricolbind a $().css() jQuery, es:

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

🙂

Due anni di ritardo, ma ho la soluzione che stai cercando. Non intendendo prendere credito dall’autore originale , ecco un plugin che ho trovato funziona eccezionalmente bene per quello che ti serve, ma ottiene tutti gli stili possibili in tutti i browser, anche IE.

Avviso: questo codice genera molto output e dovrebbe essere usato con parsimonia. Non copia solo tutte le proprietà CSS standard, ma anche tutte le proprietà CSS del fornitore per quel 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(/\-([az])/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'utilizzo di base è piuttosto semplice, ma ha anche scritto una funzione per questo:

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

Spero possa aiutare.

Perché non utilizzare .style dell’elemento DOM ? È un object che contiene membri come width e backgroundColor .

Ho provato molte soluzioni diverse. Questo è stato l’unico che ha funzionato per me in quanto è stato in grado di riprendere gli stili applicati a livello di class e in stile direttamente attribuiti sull’elemento. Quindi un font impostato a livello di file css e uno come attributo di stile; ha restituito il carattere corretto.

È semplice! (Scusa, non riesco a trovare dove l’ho trovato originariamente)

 //-- html object var element = htmlObject; //eg document.getElementById //-- or jquery object var element = htmlObject[0]; //eg $(selector) var stylearray = document.defaultView.getComputedStyle(element, null); var font = stylearray["font-family"] 

In alternativa puoi elencare tutto lo stile scorrendo attraverso l’array

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

La soluzione di @ marknadal non ha afferrato per me le proprietà trattate con il trattino (es. max-width ), ma cambiando il primo ciclo for in css2json() ha funzionato, e sospetto che esegua un minor numero di iterazioni:

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

Passa per length anziché in, recupera tramite getPropertyValue() anziché getPropertyValue() toLowerCase().