找到 div 高度总是返回零 jquery答案

【问题标题】：finding the div height always return zero jquery找到 div 高度总是返回零 jquery
【发布时间】：2015-06-19 11:59:48
【问题描述】：

我正在使用 jquery 来查找 div 的高度，但它总是返回零。我可以在 chrome 的检查元素 css 窗口中清楚地看到 div 的高度。

<div class="findheight">some text here</div>//original height is 21px

但是当我执行以下操作时，它返回零：

$('.findheight').height() //it always returns zero. really making me sick

所以我认为 div 在我调用 height 方法时可能没有文本，我确实喜欢下面。

  if($('.findheight').text().length > 6){
      alert($('.findheight').height());//This also returns zero so weird 
 }

我也尝试设置windows.timeoutcall，但这对任何延迟时间都没有帮助。

谁能帮助我为什么我总是得到零？

【问题讨论】：

你试过用outerHeight()代替height()吗？
控制台有错误吗？您是否有多个具有 findheight 类的 div？包括 Jquery 吗？您的问题中没有足够的信息，因为代码是有效的。
$('.findheight').length 是做什么的；显示？
您的元素是否不可见 (display: none)？不可见元素没有高度。
你能分享 findheight 的 css 吗？

标签： javascript jquery html css

【解决方案1】：

如果您的 div 的内容是动态加载的，那么您将需要使用 window.load 事件来获取其正确的高度，如下所述：https://stackoverflow.com/a/13071846/1845408

$(window).load(function() {
    alert($('.findheight').height()); 
});

【讨论】：

这可能是个有趣的案例。但不确定在哪里调用此加载函数，因为该 div 是容器的一部分。如果容器不加载只有我有填充文本的 div。
@rakeeee 你把这个放在html 结束标签之前怎么样<script></script> ？

【解决方案2】：

把你的代码复制到jsfiddle，高度是18

<div class="findheight">some text here</div>//original height is 21px
alert($('.findheight').height());

【讨论】：

【解决方案3】：

您是否将您的 jquery 包装在一个在 dom 准备好时执行的函数中？

$(document).ready(function(){
  console.log($('.findheight').height());
});

它对我有用，否则您的错误可能是特定于浏览器的。

这是它的工作原理。只需检查您的控制台。 https://jsfiddle.net/lesshardtofind/vzxd4t57/

如果由于某种原因您无法访问准备好的文档中的元素，例如在 Meteor、Ember、React 或 Angular 等动态模板框架中工作，那么每个对象都有一个挂钩来注册您的函数。

如果您试图在转换之间访问某个元素，则可以设置一个间隔。

var interval;
var timeout = setTimeout(function(){
  clearInterval(interval)
}, 10000); // destroy interval after 10 seconds to prevent memory leak
interval = setInterval(function(){
  if($('.findheight').length > 0){ 
    // execute your code here because you know this element is in the dom
    clearInterval(interval);
    clearTimeout(timeout);
    // clear both timeout and interval
  }
}, 100); // loop every 100 milliseconds to "poll" for the node in the dom

【讨论】：

【解决方案4】：

尝试这样做：

$('div.findheight').height();

【讨论】：

【解决方案5】：

.height() 完全采用 CSS 的 height 属性。

如果它是动态内容，您必须在相应的事件中处理它..

例如：

如果您像@renakre 所说的那样处理页面加载内容，请使用$(window).load() 或$(document).load() 来触发调用。
如果它是由您编写的其他进程生成的内容，则必须绑定相应的事件..假设它是单击或打开：

$(document).load(function() {
  // Shows the height on page load
  console.log($('.findheight').height());
  
  $('#another-element-ID').click(function() {
    // .. code which populate the div dynamicaly
    
    // Shows the height
    console.log($('.findheight').height());
  });
  
  $('.another-element-class').on('change', function() {
    // .. code which populate the div dynamicaly
    
    // Shows the height
    console.log($('.findheight').height());
  });
});

希望对你有帮助。

【讨论】：

【解决方案6】：

当没有为该元素设置显式高度/宽度或内部/外部元素的 CSS 将高度/宽度设置为 0 时，会发生这种情况；

要获得这样的高度/宽度，您必须明确设置高度/宽度。

【讨论】：