如果文本在文档加载时换行,DIV 的高度计算不正确

Height of DIV not calculated correctly if text insides wraps on document load

我有一个div。

<div id="test">this is a lot of text and more and more and more and more and more and more and more and more text</div>

在 document.ready 我得到 div 的高度。

$(document).ready(function() {
  var intDivHeight = $("#test").outerHeight(true);
});

如果我将浏览器 window 扩展到非常宽,这样文本就不会换行并重新加载页面,高度为 32。如果我将浏览器 window 缩小到很窄,这样文字换行两三行,高度还是32.

奇数

如果我将上面的代码放在 window.resize 函数中,我在初始页面加载时得到错误的大小,但是一旦我开始调整 window 的大小我就会得到正确的大小。

$(window).resize(function() {
  var intDivHeight = $("#test").outerHeight(true);
});

32 在调整大小时更改为 56 或 78。

奇数

有人可以向我解释为什么会这样吗?而且,是否有解决方案可以让我在 document.ready 上获得正确的 "wrapped" 高度?我正在使用它来尝试使用 JavaScript.

定位某些元素

谢谢!

你可以通过简单的 ol'javascript 获得 scrollHeight!或者,如果您打算在 div 中包含溢出内容,您可以坚持使用 jQuery outerHeight() 函数。

就报告页面加载与调整大小的数字而言,您需要绑定 2 个事件处理程序才能执行此操作。第一个在 load 上,第二个在 resize.

我可以举个简单的例子:

$(function() {

  $(window).on("load resize", function() {
    console.log("Our height is " + $("div")[0].scrollHeight);
  });
  
});
div {
background-color: #f1f1f1;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text! Look at all this text!</div>

您可以通过绑定 window loadresize 事件来做到这一点。

var intDivHeight;

$(document).ready(function() {
  $(window).on("load resize", function() {
    intDivHeight = $("#test").outerHeight(true);
  });
});