1. ホーム
  2. jquery

[解決済み] cssでheightが設定されていないdivのheightを取得する。

2022-03-09 02:57:20

質問

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

解決方法は?

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

デモ

を使用することができます。 .height() , .innerHeight() または outerHeight() を、必要なものに応じて選択してください。

.height() - は、パディング、ボーダー、マージンを除いた要素の高さを返します。

.innerHeight() - は、パディングを含み、ボーダーとマージンを除いた要素の高さを返します。

.outerHeight() - は、ボーダーを含みマージンを除いたdivの高さを返します。

.outerHeight(true) - は、marginを含む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>