Kann jQuery die Grenzen eines Elements (Position, Größe, Ränder usw.) in ein anderes Element kopieren?

Question

Ich habe ein Element eines beliebigen Typs. Ich möchte ein anderes Element des gleichen oder eines anderen Typs erstellen, das die gleiche Position und Größe wie das erste hat. Das Element kann positioniert sein oder nicht.

Zum Beispiel könnte ich mit einer <select> mit einer bestimmten Größe, möglicherweise abhängig von seinem Inhalt, z. B. Breite/Höhe automatisch beginnen. Ich möchte eine neue <div> erstellen, die an der gleichen Position erscheint und die gleiche Größe hat.

Ich habe versucht, die Schwimmer, die Position, Breite, Höhe, Ränder und Polsterung des Elements zu kopieren, aber das ist ein wenig umständlich. Auch wenn es in Firefox funktioniert, bekomme ich beim Testen auf Webkit einige seltsame Probleme. Bevor ich viel mehr Zeit damit verbringe herauszufinden, würde ich gerne wissen, ob es eine jQuery oder jQuery UI Funktionalität gibt, die sich bereits darum kümmert, was ich tun möchte.

Ich stelle fest, dass diese Frage an existing one ähnlich ist, aber meins hat den wichtigen Unterschied, mit Elementen unterschiedlicher Typen arbeiten zu müssen, was clone als Lösung ausschließt.

Answer 1

Dies ist NICHT effizient, getestet oder vollständig. Und es ist wahrscheinlich ähnlich zu dem, was Sie bereits tun. Aber ich dachte, ich würde es trotzdem poste:

Answer 2

Wie wäre es, wenn Sie einfach den Offset des Elements kopieren und absolut auf der Seite positionieren?

Angenommen, Sie hatten irgendwo auf der Seite ein Eingabeelement mit den Abmessungen 100x25px.

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

Und Sie wollten ein div direkt darüber setzen (und die Eingabe ausblenden).

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

Sie können Elemente Grenzen mit diesem Plugin zu jQuery herausfinden. Es wäre nur eine einfache Angelegenheit, die Eigenschaften, die Sie interessieren, auf das andere Objekt zu setzen.

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