cách tốt nhất để xác định chiều cao của DIV trước khi hiển thị trên trang web là gì?

Question

Tôi có một tập lệnh sẽ tìm nạp dữ liệu từ máy chủ và soạn DIV theo nó. DIV sẽ chứa hình ảnh, văn bản và nội dung chưa được xác định khác. Tôi muốn sắp xếp nó một cách tự do, vì vậy tôi cần phải biết chiều cao và chiều rộng của nó trước khi nó được hiển thị cho người dùng.

Nhưng theo hiểu biết của tôi, tôi nên yêu cầu trình duyệt hiển thị trước hết, nếu không tôi không thể biết chiều cao là chiều cao &.

Có cách nào tốt nhất để biết chiều rộng của DIV là & chiều cao mà không hiển thị nó cho người dùng không?

EDIT:

Một số chàng trai tốt gợi ý rằng tôi sử dụng phương pháp jquery của .width(), nhưng tôi tự hỏi rằng nếu DIV chứa hình ảnh, sẽ jQuery đợi sau khi hình ảnh sẽ được tải về? Tôi không biết kích thước của hình ảnh trước đó.

Answer 1

Bạn có thể đặt kiểu dáng display: none trên div. Sau đó, sử dụng .width() từ jQuery và bạn sẽ nhận được giá trị này.

Trong thời gian tính toán, nó sẽ sử dụng .swap() để đặt kiểu để phần tử hiển thị, gọi lại gọi tính toán chiều rộng và kiểu trả lại.

Nó sẽ thiết lập (xem code):

• position: absolute
• năng hiển thị: ẩn
• display: block

EDIT (xem ý kiến):

Nếu bạn đang tải hình ảnh và bạn có thể t để đảm bảo hình ảnh được tải trước khi bạn tính toán chiều rộng sau đó bạn có thể đính kèm tính toán chiều rộng như xử lý onload như thế này:

$('#someImg').load(function() { 
    // image is loaded, you can calculate the width 
    console.log($('#test').width())); 
}); 

HERE là một ví dụ làm việc.

Answer 2

thiết style="display:none" rộng kiểm tra và sau đó hiển thị nếu cần

Answer 3

Nếu bạn đặt style.display để 'block' và style.visibility để 'hidden' trình duyệt nên tính toán kích thước, nhưng không hiển thị div.

Tuy nhiên, tôi không biết liệu tất cả các trình duyệt có thực hiện điều này một cách chính xác hay không.

Answer 4

jQuery đủ thông minh để tính kích thước, nhưng chỉ một lần được đưa vào DOM.

var html = "<span>My Content</span>"; 

//hide your element then insert it into the webpage 
var html_el = $(html).hide(); 
$('body').append(html_el); 

//get width and height 
var width = html_el.width(); 
var height = html_el.height(); 

//Remove element from page if no longer needed 
html_el.remove(); 

Cũng lưu ý, Một yếu tố khối <div> sẽ được trả lại vào chiều rộng màn hình, do đó không báo cáo một cách chính xác độ rộng của các yếu tố kiềm chế. Để giải quyết vấn đề này, bạn thêm các kiểu này vào vùng chứa của mình: float:left hoặc display:inline-block.Ví dụ:

var html = "<div><h2>heading</h2><input type=\"text\" /></div>"; 

var html_el = $(html).css('float','left').hide(); 

Answer 5

Điều tốt nhất mà tôi có thể nghĩ đến là rất nhanh chóng hiển thị nó (thậm chí có thể tắt màn hình tùy thuộc vào tình hình của bạn), sau đó lấy kích thước của nó, và sau đó để che giấu nó một lần nữa.

Nhưng có, nếu div chứa hình ảnh, chúng cần được tải trước (hoặc có chiều rộng/chiều cao được đặt trên chúng) trước khi bạn biết kích thước của vùng chứa div. Bạn có thể sử dụng

$(document).load(function() { calculate height... }) 

để chỉ tính chiều cao sau khi trang hoàn chỉnh (bao gồm hình ảnh) đã được tải.

Answer 6

Tôi làm điều gì đó tương tự ở nơi chiều cao và chiều rộng đều không xác định. Dữ liệu điền vào div với display: none là dữ liệu từ một yêu cầu snmp do đó có một số thời gian liên quan đến việc nhận và hiển thị dữ liệu đó. Dưới đây là một chút mã tôi sử dụng để điều chỉnh vị trí tuyệt đối dựa trên chiều cao.

var height = $('.stripPopupContainer', this).height(); 

    $('.stripPopupContainer', this).css({ 
     left: '-5px', 
     top: '-'+ height + 'px' 
    });