既知の幅を指定してdivの高さを計算しますか？

8

画像とテキストを含むdivがあります（画像は可変サイズで、テキストは可変長です）。
正確な幅が事前に定義されている場合、すべてのdivコンテンツに適合するために必要な高さを計算する方法はありますか？

UPDを使用すると同じ間違った結果が出る $(document).ready()

document.addEventListener("DOMContentLoaded", function ()
{
		var div = document.getElementById("Content");
		var res = document.getElementById("Result");

		res.innerHTML = div.offsetHeight; // incorrect - returns 252 while the real height is 360 (Firefox, Chrome)
});
div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}
<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>
スニペットを展開

javascript  css 
— user626528
ソース
2
@ロブは、これが正当な質問ではなく、なぜそれが話題にならないのですか？
— トムM
あなたはJavaScriptの方法か純粋なCSSのどちらが欲しいですか？
— Bobtroopo
@Bobtroopo JSで結構です。
— -user626528
2
AFAIKでは、画像のサイズがわからないため、画像を読み込む前に正しい高さを取得できません。したがってonload、コールバック内の高さを取得して使用すると、画像のロード後にのみ正しい値を取得できると思います
— Calvin Nunes
Jqueryは問題ありませんか？
— Fahim Khan

回答:

2

window.onload代わりに使用する必要があります。

loadイベントは、スタイルシートや画像などのすべての依存リソースを含めて、ページ全体が読み込まれたときに発生します。これは、リソースの読み込みが完了するのを待たずに、ページDOMが読み込まれるとすぐに呼び出されるDOMContentLoadedとは対照的です。ref

あなたのケースでは、DOMだけでなく画像を待つ必要があります。

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};
div {
  width: 400px;
}

img {
  float: left;
  margin: 0.5em;
}
<div id="Content">

  <img src="https://picsum.photos/id/82/200/150" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce.
  Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus
  vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et
  malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>
スニペットを展開

— テマニ・アフィフ
ソース
5

divと画像の高さを正確に決定するため。これは、画像が最後に読み込まれる可能性が高いためです。画像が読み込まれる前にコンテナの高さがチェックされると、画像の高さを考慮せずに高さが返されます。

画像が読み込まれると高さが確認されるように、リスナーを画像に追加する必要があります。

img.addEventListener('load', onLoad);

スタイリングはシンプルでoffsetHeightあり、機能するclientHeightはずですが、MDN WebドキュメントのElement.scrollHeightでscrollHeight説明されているように、要素全体（ボーダーとマージンを含む）を使用する必要があるため

結果のコード：

<div id="Content">
    <img id="Image" src="https://picsum.photos/id/82/200/150" />
    ...
</div>
<br/>
<span id="Result"></span>
<script>
    var img = document.getElementById("Image");

    function onLoad() {
        var div = document.getElementById("Content");
        var res = document.getElementById("Result");

        res.innerHTML = div.scrollHeight;
    }

    img.addEventListener('load', onLoad);
</script>

例全体は、CodeSnadboxにあります。

編集divの高さを計算-既知の幅-JS

— セス・コーカー
ソース
2

あなたの質問を完全に理解しているとは思いませんが、JavaScriptを使用してdivの高さを計算できます。

var height = document.getElementsByTagName('div').offsetHeight;
— アルメディンクカ
ソース
私は252を取得しており、実際のdivは350ピクセルの高さのように見えるため、この測定は正しいようには見えません。また、ドキュメントを開いてすぐに更新した後（Firefox）、さまざまな測定値が表示されます。
— user626528
別の方法がありますdocument.getElementsByTagName('div').getBoundingClientRect().height。これを試してみて、機能するかどうかをお知らせください。
— Armedin Kuka
1
これと同じ問題。多分それは異なるレンダリング段階についての何かですか？
— user626528
1

画像が読み込まれてdivをより高くするためにdivのサイズを変更するように求めていることは知っていますが、副次的なコメントとして、background-size：containsを知っていますか？

MDNで指定されているとおり：

コンテナの値は、コンテナボックスのサイズに関係なく、コンテナの対応する辺の長さを超えないように各辺ができるだけ大きくなるように背景画像を拡大縮小する必要があることを指定します。

カバー値：

カバー値は、両方の寸法が対応するコンテナのサイズ以上であることを保証しながら、背景画像をできるだけ小さくする必要があることを指定します。以下の例のサイズを変更して、実際の動作を確認してください。

背景の位置と組み合わせると、本当に便利だと思います

— ジェナロ・カルヴィーニョ
ソース
1

あなたがjqueryを使いたいなら、これが方法です

$(document).ready(function(){
  $("#Result").html($("#Content").height());
})
div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>
スニペットを展開

— ファヒム・カーン
ソース
真剣ですか？jqueryは悪魔の生まれ変わりと見なされ、純粋なjsで夢中になれます。
— Fabio Caccamo、
0

動的ではありません。幅が設定されているため、画面によって変化しないため、幅を計算するのは難しくありません。しかし、唯一の方法は、手動で開発ツールを使用してそれを行うことです。

画像とフォントが変わる場合は、onlaodの後でdivの高さがわかるJavaScriptスクリプトを使用できます。（このコメントが必要な場合）

— レナルド・バラジ
ソース
0

jsでは、任意の要素の高さを取得できます。高さを計算するために幅はまったく必要ありません。

divは一般的なタグなので、特定のIDを追加して、高さを計算するために適切なタグがターゲットになっていることを確認します

var element_height = document.getElementById("ElToCalHeight").offsetHeight;
alert('Element height ' + element_height);
<div id="ElToCalHeight">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...

</div>
スニペットを展開

— ガネーシュクマールK
ソース
0

.scrollHeightプロパティを使用できます。

document.addEventListener("DOMContentLoaded", function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.scrollHeight; 
});
div {
  width: 400px;
}

img {
  float: left;
  margin: 0.5em;
}
<div id="Content">

  <img src="https://picsum.photos/id/82/200/150" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce.
  Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus
  vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et
  malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>
スニペットを展開

— カリマ
ソース
0

DOMContentLoadedイベントは、ブラウザーがHTMLを完全に読み込み、DOMツリーが構築されたときに発生しますが、画像やスタイルシートなどの外部リソースはまだ読み込まれていません。一方、スタイル、画像、その他のリソースを含むページ全体が読み込まれると、 window.onloadイベントが発生します。

また、画像なしのdivの高さが252であるため、高さが360ではなく252になります。参考までに、以下のスニペットを実行できます。

このコードスニペットは、画像なしでwindow.onloadを使用するdivに対応しています（したがって、高さは252です）

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};
div
	{
		width: 400px;
	}

/**	img
	{
		float: left;
		margin: 0.5em;
}**/
<div id="Content">
  <!-- Image tag is not present -->
	<!--<img src="https://picsum.photos/id/82/200/150" />-->

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>
スニペットを展開

次のコードスニペットは、画像を使用し、window.onloadを使用するdivに対応しています。これで、高さが期待どおりに360になります。

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};
div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}
<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>
スニペットを展開

— トリーナ・チョードリー
ソース
0

100％機能しています！使用Window.onloadの代わりに機能DOMContentLoaded

  <script>
      window.onload = function() {
      var div = document.getElementById("Content");
      var res = document.getElementById("Result");

      res.innerHTML = div.offsetHeight; 
    };
    </script>

あなたの結果を与えます！

— クリシュナ・サバニ
ソース
0

element.getBoundingClientRect()ロード後にメソッドを確認する必要があります。幅や高さなどのプロパティのセットを返します。

— リュー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.