web-dev-qa-db-ja.com

CSSで高さを設定せずにdivの高さを取得します

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

jquerycssheight
84
Samuel Lopez

jQuery .heightは、要素の高さを返します。計算された高さを決定するため、CSSの定義は必要ありません。

DEMO

必要に応じて、.height()、.innerHeight()、またはouterHeight()を使用できます。

enter image description here

.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>
206
Selvakumar Arumugam

他の人が同じ問題を抱えている場合に注意してください

私は同じ問題を抱えていて、別の答えを見つけました。 divの高さを取得するには、その内容によって決まるdivの高さをwindow.load、またはwindow.scrollではなくdocument。準備完了それ以外の場合、奇数の高さ/より低い高さ、つまり画像が読み込まれる前に取得します。 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());   

});
35
Iamsamstimpson

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

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

スクリーンショットの例

enter image description here

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

9
Madan Sapkota

また、divが現在DOMに追加されているおよびvisibleを確認してください。

7
Tom Scholes