jQuery plugin CSS che restituisce lo stile calcolato dell’elemento allo pseudo clone di quell’elemento?

Sto cercando un modo con jQuery per restituire un object di stili calcolati per il primo elemento abbinato. Potrei quindi passare questo object a un’altra chiamata del metodo css di jQuery.

Ad esempio, con larghezza , posso fare quanto segue per fare in modo che i 2 div abbiano la stessa larghezza:

$('#div2').width($('#div1').width()); 

Sarebbe bello se potessi inserire un input di testo come un intervallo esistente :

 $('#input1').css($('#span1').css()); 

dove .css () senza argomento restituisce un object che può essere passato a .css (obj) .

(Non riesco a trovare un plugin jQuery per questo, ma sembra che dovrebbe esistere. Se non esiste, trasformsrò il mio sotto in un plugin e lo posterò con tutte le proprietà che uso.)

Fondamentalmente, voglio pseudo clonare determinati elementi ma usare un tag diverso . Ad esempio, ho un elemento li che voglio hide e mettere su di esso un elemento di input che ha lo stesso aspetto. Quando l’utente digita, sembra che stiano modificando l’elemento inline .

Sono anche aperto ad altri approcci per questo problema di pseudo-clonazione. Eventuali suggerimenti?

Ecco cosa ho attualmente. L’unico problema è ottenere tutti gli stili possibili. Questa potrebbe essere una lista ridicolmente lunga.


 jQuery.fn.css2 = jQuery.fn.css; jQuery.fn.css = function() { if (arguments.length) return jQuery.fn.css2.apply(this, arguments); var attr = ['font-family','font-size','font-weight','font-style','color', 'text-transform','text-decoration','letter-spacing','word-spacing', 'line-height','text-align','vertical-align','direction','background-color', 'background-image','background-repeat','background-position', 'background-attachment','opacity','width','height','top','right','bottom', 'left','margin-top','margin-right','margin-bottom','margin-left', 'padding-top','padding-right','padding-bottom','padding-left', 'border-top-width','border-right-width','border-bottom-width', 'border-left-width','border-top-color','border-right-color', 'border-bottom-color','border-left-color','border-top-style', 'border-right-style','border-bottom-style','border-left-style','position', 'display','visibility','z-index','overflow-x','overflow-y','white-space', 'clip','float','clear','cursor','list-style-image','list-style-position', 'list-style-type','marker-offset']; var len = attr.length, obj = {}; for (var i = 0; i < len; i++) obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]); return obj; } 

Modifica: ho utilizzato il codice qui sopra per un po ‘. Funziona bene e si comporta esattamente come il metodo css originale con un’eccezione: se vengono passati 0 argomenti, restituisce l’object stile calcolato.

Come puoi vedere, chiama immediatamente il metodo css originale se questo è il caso che si applica. Altrimenti, ottiene gli stili calcolati di tutte le proprietà elencate (raccolte dall’elenco di stili calcolati di Firebug). Sebbene stia ottenendo una lunga lista di valori, è piuttosto veloce. Spero sia utile per gli altri.

Due anni di ritardo, ma ho la soluzione che stai cercando. Ecco un plugin che ho scritto (avvolgendo la funzione di un altro ragazzo in formato plugin) che fa esattamente quello che vuoi, ma ottiene tutti gli stili possibili in tutti i browser, anche IE.

jquery.getStyleObject.js:

 /* * getStyleObject Plugin for jQuery JavaScript Library * From: http://upshots.org/?p=112 * * Copyright: Unknown, see source link * Plugin version by Dakota Schneider (http://hackthetruth.org) */ (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;i 

L'utilizzo di base è piuttosto semplice:

 var style = $("#original").getStyleObject(); // copy all computed CSS properties $("#original").clone() // clone the object .parent() // select it's parent .appendTo() // append the cloned object to the parent, after the original // (though this could really be anywhere and ought to be somewhere // else to show that the styles aren't just inherited again .css(style); // apply cloned styles 

Spero possa aiutare.

Non è jQuery ma, in Firefox, Opera e Safari puoi usare window.getComputedStyle(element) per ottenere gli stili calcolati per un elemento e in IE <= 8 puoi usare element.currentStyle . Gli oggetti restituiti sono diversi in ogni caso e non sono sicuro di quanto bene funzionino con gli elementi e gli stili creati usando Javascript, ma forse saranno utili.

In Safari puoi fare quanto segue, che è abbastanza carino:

 document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText; 

Non so se sei felice con le risposte che hai ottenuto finora ma non lo ero e anche il mio potrebbe non piacerti, ma potrebbe aiutare qualcun altro.

Dopo aver riflettuto su come “clonare” o “copiare” gli stili degli elementi dall’uno all’altro sono arrivato a rendermi conto che non era molto ottimale un approccio per scorrere in n e applicare a n2, tuttavia siamo rimasti bloccati con questo .

Quando ti trovi di fronte a questi problemi, raramente hai bisogno di copiare TUTTI gli stili da un elemento a un altro … di solito hai una ragione specifica per volere “alcuni” stili da applicare.

Ecco cosa sono tornato a:

 $.fn.copyCSS = function( style, toNode ){ var self = $(this); if( !$.isArray( style ) ) style=style.split(' '); $.each( style, function( i, name ){ toNode.css( name, self.css(name) ) } ); return self; } 

Puoi passarlo a un elenco separato dagli spazi degli attributi css come primo argomento e al nodo su cui vuoi clonarli come secondo argomento, in questo modo:

 $('div#copyFrom').copyCSS('width height color',$('div#copyTo')); 

Qualunque cosa sembri “disallineare” dopo, cercherò di sistemare con i fogli di stile per non ingombrare il mio Js con troppe idee fuorvianti.

Ora che ho avuto un po ‘di tempo per esaminare il problema e capire meglio come funziona il metodo css interno di jQuery, quello che ho postato sembra funzionare abbastanza bene per il caso d’uso di cui ho parlato.

È stato proposto di risolvere questo problema con i CSS, ma penso che questa sia una soluzione più generalizzata che funzionerà in ogni caso senza dover aggiungere una class di rimozione o aggiornare il tuo css.

Spero che gli altri lo trovino utile. Se trovi un bug, per favore fammi sapere.

Mi piace la tua risposta Quickredfox. Avevo bisogno di copiare alcuni CSS ma non immediatamente, quindi l’ho modificato per rendere opzionale il “toNode”.

 $.fn.copyCSS = function( style, toNode ){ var self = $(this), styleObj = {}, has_toNode = typeof toNode != 'undefined' ? true: false; if( !$.isArray( style ) ) { style=style.split(' '); } $.each( style, function( i, name ){ if(has_toNode) { toNode.css( name, self.css(name) ); } else { styleObj[name] = self.css(name); } }); return ( has_toNode ? self : styleObj ); } 

Se lo chiami così:

 $('div#copyFrom').copyCSS('width height color'); 

Quindi restituirà un object con le dichiarazioni CSS da utilizzare in un secondo momento:

 { 'width': '140px', 'height': '860px', 'color': 'rgb(238, 238, 238)' } 

Grazie per il punto di partenza.

Multipurpose .css()

uso

 $('body').css(); // -> { ... } - returns all styles $('body').css('*'); // -> { ... } - the same (more verbose) $('body').css('color width height') // -> { color: .., width: .., height: .. } - returns requested styles $('div').css('width height', '100%') // set width and color to 100%, returns self $('body').css('color') // -> '#000' - native behaviour 

Codice

 (function($) { // Monkey-patching original .css() method var nativeCss = $.fn.css; var camelCase = $.camelCase || function(str) { return str.replace(/\-([az])/g, function($0, $1) { return $1.toUpperCase(); }); }; $.fn.css = function(name, value) { if (name == null || name === '*') { var elem = this.get(0), css, returns = {}; if (window.getComputedStyle) { css = window.getComputedStyle(elem, null); for (var i = 0, l = css.length; i < l; i++) { returns[camelCase(css[i])] = css.getPropertyValue(css[i]); } return returns; } else if (elem.currentStyle) { css = elem.currentStyle; for (var prop in css) { returns[prop] = css[prop]; } } return returns; } else if (~name.indexOf(' ')) { var names = name.split(/ +/); var css = {}; for (var i = 0, l = names.length; i < l; i++) { css[names[i]] = nativeCss.call(this, names[i], value); } return arguments.length > 1 ? this : css; } else { return nativeCss.apply(this, arguments); } } })(jQuery); 

L’idea principale è presa dalle risposte di Dakota e HexInteractive .

Grande funzione fornita dall’OP. L’ho leggermente modificato in modo che tu possa scegliere quali valori vuoi restituire.

 (function ($) { var jQuery_css = $.fn.css, gAttr = ['font-family','font-size','font-weight','font-style','color','text-transform','text-decoration','letter-spacing','word-spacing','line-height','text-align','vertical-align','direction','background-color','background-image','background-repeat','background-position','background-attachment','opacity','width','height','top','right','bottom','left','margin-top','margin-right','margin-bottom','margin-left','padding-top','padding-right','padding-bottom','padding-left','border-top-width','border-right-width','border-bottom-width','border-left-width','border-top-color','border-right-color','border-bottom-color','border-left-color','border-top-style','border-right-style','border-bottom-style','border-left-style','position','display','visibility','z-index','overflow-x','overflow-y','white-space','clip','float','clear','cursor','list-style-image','list-style-position','list-style-type','marker-offset']; $.fn.css = function() { if (arguments.length && !$.isArray(arguments[0])) return jQuery_css.apply(this, arguments); var attr = arguments[0] || gAttr, len = attr.length, obj = {}; for (var i = 0; i < len; i++) obj[attr[i]] = jQuery_css.call(this, attr[i]); return obj; } })(jQuery); 

Scegli i valori che desideri specificando il tuo array: $().css(['width','height']);

Volevo solo aggiungere un’estensione al codice inviato da Dakota.

Se vuoi clonare un elemento con tutti gli stili applicati e tutti gli elementi figli, puoi usare il seguente codice:

 /* * getStyleObject Plugin for jQuery JavaScript Library * From: http://upshots.org/?p=112 * * Copyright: Unknown, see source link * Plugin version by Dakota Schneider (http://hackthetruth.org) */ (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;i 

Quindi puoi semplicemente fare: $clone = $("#target").cloneWithCSS()

 $.fn.cssCopy=function(element,styles){ var self=$(this); if(element instanceof $){ if(styles instanceof Array){ $.each(styles,function(val){ self.css(val,element.css(val)); }); }else if(typeof styles===”string”){ self.css(styles,element.css(styles)); } } return this; }; 

Usa l’esempio

 $("#element").cssCopy($("#element2"),['width','height','border'])