jQuery CSS du plugin qui renvoie calculée style de l'élément de pseudo clone de cet élément?

Question

Je suis à la recherche d'un moyen à l'aide de jQuery pour retourner un objet de la styles pour le 1er appariés élément. Je pourrais alors passer cet objet à un autre appel de jQuery css méthode.

Par exemple, avec la largeur, je peux faire ce qui suit pour faire les 2 divs ont la même largeur:

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

Ce serait bien si je pouvais faire une saisie de texte ressembler à une plage existante:

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

où .css() sans argument retourne un objet qui peut être passée à .css(obj).

(Je ne peux pas trouver un plugin jQuery pour cela, mais il me semble qu'il doit exister. S'il n'existe pas, je vais changer la mienne ci-dessous dans un plugin et de le poster avec toutes les propriétés que j'utilise.)

Fondamentalement, je veux pseudo clone de certains éléments , mais utiliser une autre balise. Par exemple, j'ai un élément li que je veux cacher et de mettre un élément de saisie sur ce qui regarde la même chose. Lorsque l'utilisateur tape, on dirait qu'ils sont d'édition de l'élément inline.

Je suis aussi ouvert à d'autres approches pour ce pseudo-clonage de problème pour le montage. Toutes les suggestions?

Voici ce que j'ai actuellement. Le seul problème est juste en train de tous les styles possibles. Cela pourrait être une liste ridiculement longue.

---

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

Edit: j'ai été à l'aide du code ci-dessus pendant un certain temps. Il fonctionne bien et se comporte exactement comme l'original de la méthode css avec une exception: si 0 les arguments sont passés, il renvoie le résultat d'un calcul du style de l'objet.

Comme vous pouvez le voir, il appelle immédiatement l'original de la méthode css si c'est le cas qui s'applique. Sinon, il obtient le calcul des styles de tous les biens (recueillies à partir de Firebug calculée style de liste). Bien que l'obtention d'une longue liste de valeurs, c'est assez rapide. J'espère que c'est utile pour les autres.

Answer 1

Deux ans de retard, mais j'ai la solution que vous cherchez. Voici un plugin que j'ai écrit (en l'enveloppant d'un autre gars de la fonction dans le format de plugin) qui fait exactement ce que vous voulez, mais obtient tous les styles possibles dans tous les navigateurs, même 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<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

Utilisation de base est assez simple:

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

Espérons que cela aide.

Answer 2

Ce n'est pas jQuery mais, dans Firefox, Opera et Safari, vous pouvez utiliser window.getComputedStyle(element) pour obtenir le calcul des styles pour un élément et dans IE<=8, vous pouvez utiliser element.currentStyle. Les objets retournés sont différentes dans chaque cas, et je ne suis pas sûr de savoir comment bien travailler avec des éléments et des styles créés à l'aide de Javascript, mais peut-être qu'ils peuvent être utiles.

Dans Safari, vous pouvez effectuer les opérations suivantes qui est chouette:

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

Answer 3

Je ne sais pas si vous êtes heureux avec les réponses que vous avez obtenu jusqu'à présent, mais je n'étais pas de la mine et peut ne pas vous plaire, mais il peut aider quelqu'un d'autre.

Après méditer sur la façon de "clone" ou "copie" des éléments des styles à partir de l'une à l'autre j'ai fini par réaliser qu'il n'était pas très optimal d'une approche à la boucle par n et s'appliquent à n2, et nous sommes encore sorta coincé avec ce.

Quand vous vous trouvez face à ces questions, vous avez rarement besoin de copier TOUS les styles à partir d'un élément à un autre... généralement, vous avez une raison particulière de vouloir "certains" styles à appliquer.

Voici ce que j'ai est revenue à:

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

Vous pouvez passer d'un espace-liste séparée par des attributs css comme premier argument et le nœud que vous voulez de les cloner comme le deuxième argument, comme suit:

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

Que ce soit d'autre semble "un mauvais alignement" après cela, je vais essayer de corriger avec les feuilles de style pour ne pas encombrer mon Js avec trop de mise à feu accidentelle d'idées.

Answer 4

J'aime votre réponse Quickredfox. J'avais besoin de copier un peu de CSS, mais pas immédiatement, alors je l'ai modifié pour faire de la "toNode" en option.

$.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 );
}

Si vous l'appelez comme ceci:

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

Puis il retourne un objet avec vos déclarations CSS pour que vous puissiez utiliser plus tard:

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

Merci pour le point de départ.

Answer 5

Maintenant que j'ai eu le temps de me pencher sur le problème et de mieux comprendre comment jQuery interne css méthode fonctionne, ce que j'ai posté semble fonctionner assez bien pour le cas d'utilisation que j'ai mentionné.

Il a été proposé que vous pouvez résoudre ce problème avec le CSS, mais je pense que c'est un plus généralisée solution qui fonctionne dans tous les cas, sans avoir à ajouter une suppression de classes ou de mettre à jour votre css.

J'espère que d'autres le trouvent utile. Si vous trouvez un bug, s'il vous plaît laissez-moi savoir.