Nhận chiều cao của div mà không có chiều cao được đặt trong css

Có cách nào để lấy chiều cao của một phần tử nếu không có bộ quy tắc chiều cao CSS cho phần tử Tôi không thể sử dụng .height()phương thức jQuery vì nó cần một bộ quy tắc CSS trước không? Có cách nào khác để có được chiều cao không?

jQuery .heightsẽ trả về cho bạn chiều cao của phần tử. Nó không cần định nghĩa CSS vì nó xác định chiều cao được tính toán.

BẢN GIỚI THIỆU

Bạn có thể sử dụng .height(), .innerHeight()hoặc outerHeight()dựa trên những gì bạn cần.

.height() - trả về chiều cao của phần tử không bao gồm phần đệm, đường viền và lề.

.innerHeight() - trả về chiều cao của phần tử bao gồm phần đệm nhưng loại trừ đường viền và lề.

.outerHeight() - trả về chiều cao của div bao gồm cả đường viền nhưng không bao gồm lề.

.outerHeight(true) - trả về chiều cao của div bao gồm cả lề.

Kiểm tra đoạn mã dưới đây để xem bản demo trực tiếp. :)

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

Chỉ là một lưu ý trong trường hợp những người khác có cùng một vấn đề.

Tôi đã có cùng một vấn đề và tìm thấy một câu trả lời khác. Tôi thấy rằng việc nhận chiều cao của một div mà chiều cao được xác định bởi nội dung của nó cần phải được bắt đầu trên window.load hoặc window.scroll chứ không phải document. Nếu không thì tôi nhận được chiều cao lẻ / chiều cao nhỏ hơn, tức là trước khi tải hình ảnh. Tôi cũng đã sử dụng externalHeight () .

var currentHeight = 0;
$(window).load(function() {
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

});

Có thể làm điều này trong jQuery . Hãy thử tất cả các tùy chọn .height(), .innerHeight()hoặc .outerHeight().

$('document').ready(function() {
    $('#right_div').css({'height': $('#left_div').innerHeight()});
});

Ảnh chụp màn hình ví dụ

Hi vọng điêu nay co ich. Cảm ơn!!

Đồng thời đảm bảo rằng div hiện được nối vào DOM và hiển thị .