Question

我有一个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);
});

如果我将浏览器窗口扩展为非常宽，那么文本不会换行并重新加载页面，高度为32.如果我将浏览器窗口缩小为瘦，以便文本包裹在两三行，高度仍然是32岁。

奇

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

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

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

奇

有人可以向我解释为什么会这样吗？并且，是否有一个解决方案，以便我可以得到正确的＆＃34;包装＆＃34; document.ready上的高度？我正在使用它来尝试使用JavaScript定位某些元素。

谢谢！

Answer 1

您可以通过简单的“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>

Answer 2

您可以通过绑定窗口load和resize事件来完成此操作。

var intDivHeight;

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

如果文本内部包装文档加载，则无法正确计算DIV的高度

2 个答案: