首頁猿問在給定寬度的情況下計算 div 高度？

在給定寬度的情況下計算 div 高度？

JavaScript

千萬里不及你 2022-01-13 16:52:10

我有一個包含圖片和一些文本的 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>

查看完整描述

3 回答

HUH函數

TA貢獻1836條經驗獲得超4個贊

準確判斷div和圖片的高度。這是因為圖像可能會最后完成加載 - 如果在加載圖像之前檢查容器的高度，它將返回高度而不考慮圖像高度。

應將偵聽器添加到圖像中，以便在圖像加載后檢查高度。

img.addEventListener('load', onLoad);

因為樣式很簡單，offsetHeight并且clientHeight應該可以工作，但要包含整個元素（帶邊框和邊距）使用scrollHeight，如MDN web docs 上 Element.scrollHeight所述

結果代碼：

...

</div>

<br/>

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>

反對回復 2022-01-13

桃花長相依

TA貢獻1860條經驗獲得超8個贊

你必須window.onload改用。

加載整個頁面時會觸發 load 事件，包括所有相關資源，例如樣式表和圖像。這與 DOMContentLoaded 不同，后者在頁面 DOM 加載后立即觸發，無需等待資源完成加載。參考

在您的情況下，您需要等待圖像而不僅僅是 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;

}

<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/>

反對回復 2022-01-13

手掌心

TA貢獻1942條經驗獲得超3個贊

我不確定我是否完全理解您的問題，但您可以使用 javascript 來計算 div 的高度。

var height = document.getElementsByTagName('div').offsetHeight;

反對回復 2022-01-13

3 回答
0 關注
174 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在給定寬度的情況下計算 div 高度？

在給定寬度的情況下計算 div 高度？

3 回答

添加回答

在給定寬度的情況下計算 div 高度？