Uzyskaj wysokość elementu div bez wysokości ustawionej w css

Czy istnieje sposób, aby uzyskać wysokość elementu, jeśli nie ma ustawionej reguły CSS dla elementu. Nie mogę użyć .height()metody jQuery, ponieważ najpierw trzeba ustawić regułę CSS? Czy jest inny sposób na uzyskanie wysokości?

jQuery .heightzwróci wysokość elementu. Nie potrzebuje definicji CSS, ponieważ określa obliczoną wysokość.

PRÓBNY

Można użyć .height(), .innerHeight()lub outerHeight()w oparciu o to, czego potrzebują.

.height() - zwraca wysokość elementu bez dopełnienia, obramowania i marginesu.

.innerHeight() - zwraca wysokość elementu z dopełnieniem, ale bez obramowania i marginesu.

.outerHeight() - zwraca wysokość elementu div wraz z obramowaniem, ale wyklucza margines.

.outerHeight(true) - zwraca wysokość elementu div wraz z marginesem.

Sprawdź poniższy fragment kodu, aby zobaczyć wersję demonstracyjną na żywo. :)

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

Tylko uwaga na wypadek, gdyby inni mieli ten sam problem.

Miałem ten sam problem i znalazłem inną odpowiedź. Zauważyłem, że uzyskanie wysokości div, której wysokość jest określona przez jego zawartość, musi być zainicjowane na window.load lub window.scroll not document.ready, w przeciwnym razie otrzymuję dziwne wysokości / mniejsze wysokości, tj. Zanim obrazy zostaną załadowane. Użyłem również 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());   

});

Można to zrobić w jQuery . Wypróbuj wszystkie opcje .height(), .innerHeight()lub .outerHeight().

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

Przykładowy zrzut ekranu

Mam nadzieję że to pomoże. Dzięki!!

Upewnij się również, że element div jest aktualnie dołączony do DOM i widoczny .