Css'de yükseklik ayarı yapılmadan div yüksekliğini alın

Öğe için CSS yükseklik kuralı ayarlanmamışsa, önce .height()bir CSS kural setine ihtiyaç duyduğundan jQuery yöntemini kullanamıyorum, bir elemanın yüksekliğini almanın bir yolu var mı ? Yüksekliği almanın başka yolu var mı?

jQuery .heightsize öğenin yüksekliğini döndürecektir. Hesaplanan yüksekliği belirlediği için CSS tanımına ihtiyaç duymaz.

DEMO

Sen kullanabilir .height(), .innerHeight()ya outerHeight()neye ihtiyacınız dayalı.

.height() - dolgu, kenarlık ve kenar boşluğu hariç öğenin yüksekliğini döndürür.

.innerHeight() - dolguyu içeren öğenin yüksekliğini döndürür ancak kenarlık ve kenar boşluğunu hariç tutar.

.outerHeight() - kenarlık dahil div yüksekliğini döndürür ancak kenar boşluğunu hariç tutar.

.outerHeight(true) - kenar boşluğu dahil div'in yüksekliğini döndürür.

Canlı demo için aşağıdaki kod parçacığını kontrol edin. :)

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

Başkalarının da aynı sorunu yaşaması ihtimaline karşı bir not.

Aynı sorunu yaşadım ve farklı bir cevap buldum. Yüksekliği olan bir div'in yüksekliğinin içeriğinin window.load veya window.scroll not document.'da başlatılması gerektiğine göre belirlendiğini buldum.Aksi takdirde tuhaf yükseklikler / daha küçük yükseklikler elde ederim , yani görüntüler yüklenmeden önce. Ayrıca OuterHeight () kullandım .

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

});

Bunu jQuery'de yapabilir . Tüm seçenekleri deneyin .height(), .innerHeight()ya da .outerHeight().

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

Örnek Ekran Görüntüsü

Bu yardımcı olur umarım. Teşekkürler!!

Ayrıca, div'in şu anda DOM'a eklendiğinden ve görünür olduğundan emin olun .