chọn chiều cao thực sự của một DIV trong jQuery

Question

Tôi có một DIV định nghĩa với chiều cao cố định:

.w { 
    height: 100px; 
    overflow: hidden; 
} 

nếu tôi đặt văn bản trong này nó sẽ ẩn tất cả mọi thứ mà đi vượt ra ngoài 100px. Tôi có một nút hiển thị tất cả văn bản, về cơ bản nó thực hiện điều này:

$('.w').height('auto'); 

điều này sẽ làm cho tất cả văn bản hiển thị, nhưng tôi muốn tạo hiệu ứng này. Và điều đó sẽ không hoạt động với chiều cao = 'tự động', nó phải có chiều cao cụ thể.

Câu hỏi: làm thế nào để tôi nhận được chiều cao mà DIV phải có khả năng hiển thị tất cả văn bản trong đó?

Answer 1

Bạn có thể đặt chiều cao thành 'tự động', sau đó đo chiều cao, sau đó đặt lại và bắt đầu hiệu ứng.

Something như thế này (live example):

jQuery(function($) { 

    // Div starts with "style='height: 10px; overflow: hidden" 
    var div = $('#thediv'); 

    // On click, animate it to its full natural height 
    div.click(function() { 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = div.height(); 
    newHeight = div.height('auto').height(); 

    // Put back the short height (you could grab this first 
    div.height(oldHeight); 
    div.animate({height: newHeight + "px"}, "slow"); 
    }); 
});​ 

Answer 2

thử scrollHeight như thế này:

$('#ID_OF_DIV')[0].scrollHeight 

Note [0], vì nó là tài sản của các yếu tố DOM.

Answer 3

T.J. Câu trả lời của Crowder không phù hợp với tôi vì "oldHeight" là giá trị pixel được tính toán, khác với giá trị rem tôi đã chỉ định trong biểu định kiểu của tôi. Ngoài ra, kiểu nội tuyến đã vượt qua một chiều cao khác mà tôi đã có cho một truy vấn phương tiện khác. Vì vậy, thay vì lưu "oldHeight" và đưa nó trở lại sau, tôi chỉ xóa phong cách nội tuyến của jQuery bằng cách đặt css 'height' thành một chuỗi rỗng.

jQuery(function($) { 

    // Div starts with "style='height: 10px; overflow: hidden" 
    var div = $('#thediv'); 

    // On click, animate it to its full natural height 
    div.click(function() { 
     // Measure after 
     var newHeight = div.height('auto').height(); 

     // Remove inline styles 
     div.css('height', ''); 
     div.animate({height: newHeight + "px"}, "slow"); 

    }); 
});​