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

93

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?

Samuel Lopez
źródło
2
Co sprawia, że ​​myślisz, że height()potrzebna jest reguła CSS?
James Montagne
height()otrzyma obliczoną wysokość elementów ...
elclanrs
1
brzmi tak, jakbyś próbował uzyskać wysokość czegoś wewnątrz ukrytego elementu? lub sam element jest ukryty. Nie da się!
charlietfl
Uwzględnij swój kod, ponieważ nie jest wymagane heightustawienie css. To łącze nie ma nic wspólnego z jquery.
James Montagne
ten link „wgląd” ma 7 lat!
charlietfl

Odpowiedzi:

224

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ą.

wprowadź opis obrazu tutaj

.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>

Selvakumar Arumugam
źródło
37

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

});
Iamsamstimpson
źródło
1
Prawdopodobnie otrzymujesz dziwne wysokości, ponieważ jest więcej instrukcji, które zmieniają wysokość po ich użyciu / wydrukowaniu. Zaleca się, aby zapytać o wysokość na końcu scenariusza
Gjaa,
10

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

wprowadź opis obrazu tutaj

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

Madan Sapkota
źródło
8

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

Tom Scholes
źródło
13
Zwróć uwagę, że może to bardziej pasować jako komentarz niż odpowiedź.
kkuilla
4
Nie miałby przywilejów komentowania, relaksujcie się.
StackOverflowed
4
Uważam to za kluczową informację, ponieważ żadna z pozostałych odpowiedzi nie zadziała, jeśli element nie jest dołączony do DOM na początku.
Guido