Отримати висоту div без встановленої висоти в css

Чи є спосіб отримати висоту елемента, якщо для елемента не встановлено правило висоти CSS, я не можу використовувати .height()метод jQuery, оскільки йому спочатку потрібно встановити правило CSS? Чи є інший спосіб отримати висоту?

jQuery .heightповерне вам висоту елемента. Він не потребує визначення CSS, оскільки він визначає обчислену висоту.

ДЕМО

Ви можете використовувати .height(), .innerHeight()або на outerHeight()основі того, що вам потрібно.

.height() - повертає висоту елемента, виключаючи заповнення, межі та поля.

.innerHeight() - повертає висоту елемента, включає відступ, але виключає межу та поле.

.outerHeight() - повертає висоту div, включаючи межу, але виключає поле.

.outerHeight(true) - повертає висоту div, включаючи поле.

Перегляньте нижче фрагмент коду для демонстрації в реальному часі. :)

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

Лише примітка на випадок, якщо інші мають таку ж проблему.

У мене була та сама проблема, і я знайшов іншу відповідь. Я виявив, що отримання висоти div, яка є висотою, визначається його вмістом, потрібно ініціювати на window.load , або window.scroll not document. Već інакше я отримую непарну висоту / меншу висоту, тобто до завантаження зображень. Я також використовував 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());   

});

Можна зробити це в jQuery . Спробуйте всі варіанти .height(), .innerHeight()або .outerHeight().

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

Приклад знімка екрана

Сподіваюся, це допомагає. Дякую!!

Також переконайтесь, що div зараз додано до DOM і видимо .