CSSに高さが設定されていないdivの高さを取得します

要素にCSSの高さのルールセットがない場合、要素の高さを取得する方法はあります.height()か。最初にCSSのルールセットが必要なため、jQueryメソッドを使用できません。高さを取得する他の方法はありますか？

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ではなくdocument.readyで開始する必要があることがわかりました。私も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());   

});

jQueryでこれを行うことができます。すべてのオプションを試してみてください.height()、.innerHeight()または.outerHeight()。

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

スクリーンショットの例

お役に立てれば。ありがとう!!

また、確認してdiv要素は現在、DOMに追加されと見えます。