获取 HTML 元素的高度 jQuery答案

【问题标题】：Get Height of HTML Element jQuery获取 HTML 元素的高度 jQuery
【发布时间】：2012-05-01 09:54:30
【问题描述】：

我为我的应用创建了一个漂亮的小模态消息窗口，但我似乎无法找到注入叠加层的容器的高度。

function load_shipping_message (title, message) {
   var left = (($(window).width() / 2) - 300) + 'px';
   var height = $(document).height();
   var overlay = $('<div id="overlay" style="display:none;height:'+height+'px;"></div>').appendTo($('body'));
   var atc = $('<div class="atc-container" style="width:600px;"></div>').appendTo($('#overlay'));
   var mess = $('<div class="atc-msg"><div class="success">'+title+'</div><p>'+message+'</p><p class="clearfix"><a class="button" style="float:right;"><span>Close</span></p></div>');
   atc.html(mess);
   var top = (($(window).height() / 2) - (atc.height() / 2)) + 'px';
   atc.css ({
      'top': top,
      'left': left  
   });
   overlay.fadeIn('slow', function () {
      overlay.click (function() {
         overlay.fadeOut ('slow', function () {
            overlay.remove();   
         });    
      });
   });
}

上面的 atc.height() 的值总是返回 0，即使它包含内容。

除此之外它工作得很好，它只是将消息框的顶部设置为视口的中间点，因为 atc.height() 始终为零。只是想正确居中，盒子的高度根据内容的长度明显不同。

也许是因为覆盖层被隐藏了？

谢谢。

-文斯

【问题讨论】：

标签： jquery html height

【解决方案1】：

如果一个元素有display:none，它及其所有后代的高度（和宽度）将为零。

要解决此问题，请执行以下操作：

set display to block
get height
set display back to none

由于 JS 会阻止页面重绘，因此在测量高度时用户将永远无法看到正在显示的元素。

【讨论】：

【解决方案2】：

是的，如果它的父级被隐藏，它将显示 0。尝试将叠加层移出用户视图，margin-top: -10000px 或类似的东西，而不是显示 none，这样 DOM 仍在渲染它，即使用户看不到它。

【讨论】：