Dapatkan tinggi div tanpa menetapkan ketinggian di css

Apakah ada cara untuk mendapatkan tinggi elemen jika tidak ada aturan tinggi CSS yang ditetapkan untuk elemen. Saya tidak dapat menggunakan .height()metode jQuery karena memerlukan aturan CSS yang ditetapkan terlebih dahulu? Apakah ada cara lain untuk mendapatkan ketinggian?

jQuery .heightakan mengembalikan Anda ketinggian elemen. Itu tidak membutuhkan definisi CSS karena ini menentukan tinggi yang dihitung.

DEMO

Anda dapat menggunakan .height(), .innerHeight()atau outerHeight()berdasarkan apa yang Anda butuhkan.

.height() - mengembalikan ketinggian elemen tidak termasuk padding, border dan margin.

.innerHeight() - mengembalikan ketinggian elemen termasuk padding tetapi tidak termasuk perbatasan dan margin.

.outerHeight() - mengembalikan tinggi div termasuk perbatasan tetapi tidak termasuk margin.

.outerHeight(true) - mengembalikan tinggi div termasuk margin.

Lihat cuplikan kode di bawah ini untuk demo langsung. :)

$(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>

Hanya catatan jika orang lain memiliki masalah yang sama.

Saya memiliki masalah yang sama dan menemukan jawaban yang berbeda. Saya menemukan bahwa mendapatkan tinggi div yang tingginya ditentukan oleh isinya perlu dimulai pada window.load , atau window.scroll bukan document.ready sebaliknya saya mendapatkan ketinggian ganjil / tinggi lebih kecil, yaitu sebelum gambar dimuat. Saya juga menggunakan outerHeight () .

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

});

Dapat melakukan ini di jQuery . Coba semua opsi .height(), .innerHeight()atau .outerHeight().

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

Contoh Screenshot

Semoga ini membantu. Terima kasih!!

Pastikan juga div saat ini ditambahkan ke DOM dan terlihat .