Est-ce que jQuery peut copier les limites d'un élément (position, taille, marges, etc.) vers un autre élément?

Question

J'ai un élément de type arbitraire. J'aimerais créer un autre élément, de type identique ou différent, ayant la même position et la même taille que le premier. L'élément peut être positionné ou non.

Par exemple, je pourrais commencer avec un <select> avec une certaine taille, éventuellement dépendant de son contenu, c'est-à-dire largeur/hauteur auto. Je veux créer un nouveau <div> qui apparaît à la même position et a la même taille.

J'ai essayé de copier le flottant, le clair, la position, la largeur, la hauteur, les marges et le rembourrage de l'élément, mais c'est un peu encombrant. En outre, même si cela fonctionne dans Firefox, je rencontre des problèmes étranges lors des tests sur Webkit. Avant de passer plus de temps à le découvrir, j'aimerais savoir s'il y a des fonctionnalités jQuery ou jQuery UI qui s'occupent déjà de ce que je veux faire.

Je me rends compte que cette question est similaire à an existing one, mais le mien a la distinction importante de devoir travailler avec des éléments de types différents, ce qui exclut clone comme solution.

Answer 1

Ceci n'est PAS efficace, testé ou complet. Et c'est probablement similaire à ce que vous faites déjà. Mais je pensais que je posterais de toute façon:

var positioningProps = ["float","position","width","height","left","top","marginLeft","marginTop","paddingLeft","paddingTop"]; 
var select = $("#mySelect"); 
var div = $("<div>").hide().before(select); 
// don't do this kind of loop in production code 
// http://www.vervestudios.co/jsbench/ 
for(var i in positioningProps){ 
    div.css(positioningProps[i], select.css(positioningProps[i])||""); 
} 
select.hide(); 

Answer 2

Que diriez-vous simplement de copier le décalage de l'élément et de le positionner absolument sur la page?

Supposons que vous ayez un élément d'entrée quelque part sur la page avec les dimensions 100x25px.

<input type="text" id="firstname" style="width: 100px; height: 20px" /> 

Et vous vouliez placer un div juste dessus (et cacher l'entrée).

// Store the input in a variable 
var $firstname = $("#firstname"); 

// Create a new div and assign the width/height/top/left properties of the input 
var $newdiv = $("<div />").css({ 
    'width': $firstname.width(), 
    'height': $firstname.height(), 
    'position': 'absolute', 
    'top': $firstname.offset().top, 
    'left': $firstname.offset().left 
}); 

// Add the div to the body 
$(body).append($newdiv); 

Answer 3

Vous pouvez trouver une limite d'éléments en utilisant ce plugin à jQuery. Ce serait juste une simple question de définir toutes les propriétés qui vous intéressent à l'autre objet.

http://code.google.com/p/jquery-ui/source/browse/branches/labs/powella/coverslide/res/js/jquery/jquery.bounds.js?r=2698

/* 
* jQuery.bounds 
* author: Andrew Powell 
*/ 

(function($){ 

     $.fn['bounds'] = function() 
     { 
       var t = this, e = t[0]; 
       if (!e) return; 

       var offset = t.offset(), pos = { width:e.offsetWidth, height:e.offsetHeight, left: 0, top: 0, right: 0, bottom: 0, x: 0, y: 0 }; 

       pos.left = offset.left; 
       pos.top = offset.top; 

       //right and bottom 
       pos.right = (pos.left + pos.width); 
       pos.bottom = (pos.top + pos.height); 
       pos.x = pos.left; 
       pos.y = pos.top; 
       pos.inner = {width: t.width(), height: t.height()}; 

       $.extend(pos, {toString: function(){ var t = this; return 'x: ' + t.x + ' y: ' + t.y + ' width: ' + t.width + ' height: ' + t.height + ' right: ' + t.right + ' bottom: ' + t.bottom; }}); 

       return pos; 
     }; 

})(jQuery);