jQuery può copiare i limiti di un elemento (posizione, dimensione, margini, ecc.) In un altro elemento?

Question

Ho un elemento di un tipo arbitrario. Mi piacerebbe creare un altro elemento, dello stesso tipo o di un altro tipo che abbia la stessa posizione e la stessa dimensione del primo. L'elemento può o non può essere posizionato.

Ad esempio, potrei iniziare con un <select> con una certa dimensione, che potrebbe dipendere dal suo contenuto, cioè larghezza/altezza automatica. Voglio creare un nuovo <div> che appare nella stessa posizione e ha le stesse dimensioni.

Ho provato a copiare galleggiante dell'elemento, chiari, posizione, larghezza, altezza, margini e padding, ma questo è un po 'ingombrante. Inoltre, mentre funziona in Firefox, sto incontrando alcuni strani problemi durante il test su Webkit. Prima di dedicare molto più tempo a capirlo, mi piacerebbe sapere se ci sono alcune funzionalità di interfaccia utente jQuery o jQuery che si occupano già di ciò che voglio fare.

Mi rendo conto che questa domanda è simile a an existing one, ma la mia ha l'importante distinzione di dover lavorare con elementi di tipi diversi, il che preclude allo clone come soluzione.

Answer 1

Questo NON è efficiente, testato o completo. Ed è probabilmente simile a quello che stai già facendo. Ma ho pensato di postarlo comunque:

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

Che ne dici di copiare l'offset dell'elemento e posizionarlo assolutamente sulla pagina?

Supponiamo di avere un elemento di input da qualche parte nella pagina con dimensioni 100x25px.

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

E si voleva posizionare un div direttamente sopra (e nascondere l'input).

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

È possibile scoprire i limiti di elementi utilizzando questo plugin per jQuery. Sarebbe solo una semplice questione di impostare le proprietà a cui sei interessato nell'altro oggetto.

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