jQuery có thể sao chép các giới hạn của một phần tử (vị trí, kích thước, lề, v.v.) cho một phần tử khác không?

Question

Tôi có một yếu tố thuộc loại tùy ý. Tôi muốn tạo một phần tử khác, hoặc là cùng một loại hoặc một loại khác có cùng vị trí và kích thước như vị trí đầu tiên. Phần tử có thể hoặc không thể được định vị.

Ví dụ: tôi có thể bắt đầu với một số <select> có kích thước nhất định, có thể phụ thuộc vào nội dung của nó, tức là chiều rộng/chiều cao tự động. Tôi muốn tạo một <div> mới xuất hiện ở cùng một vị trí và có cùng kích thước.

Tôi đã thử sao chép phần tử, phần tử, vị trí, chiều rộng, chiều cao, lề và phần đệm của phần tử, nhưng điều này hơi cồng kềnh. Ngoài ra, trong khi nó hoạt động trong Firefox, tôi đang gặp phải một số vấn đề lạ khi thử nghiệm trên Webkit. Trước khi tôi dành nhiều thời gian hơn để tìm ra nó, tôi muốn biết liệu có một số chức năng jQuery hoặc jQuery UI đã xử lý những gì tôi muốn làm hay không.

Tôi nhận thấy rằng câu hỏi này tương tự như an existing one, nhưng tôi có sự khác biệt quan trọng cần phải làm việc với các phần tử khác nhau, loại trừ clone làm giải pháp.

Answer 1

Điều này không hiệu quả, được kiểm tra hoặc hoàn thành. Và nó có lẽ tương tự như những gì bạn đang làm. Nhưng tôi nghĩ rằng tôi sẽ đăng nó anyways:

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

Làm thế nào để sao chép phần tử bù đắp của phần tử và định vị hoàn toàn nó trên trang?

Giả sử bạn có phần tử đầu vào ở đâu đó trên trang có kích thước 100x25px.

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

Và bạn muốn đặt div ngay trên đầu trang (và ẩn đầu vào).

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

Bạn có thể tìm ra một yếu tố giới hạn bằng cách sử dụng plugin này để jQuery. Nó sẽ chỉ là một vấn đề đơn giản của thiết lập bất cứ tài sản bạn quan tâm đến các đối tượng khác.

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