Question

我有一个jquery html对象：

var $header = $('<div id="print-header" class="print-header" style="width: ' + this.previewWidth + 'px; min-height: 190px;"></div>');

当我用console.log($header);输出时，我可以看到对象。

在此之后出现一个for循环，它将float: left附加到$header对象上的元素附加

for(var i = 0; i < $form.length; i++){
  var $widget = $form[i];

  var wHtml = '<div class="element" style="width: ' + $widget.size_x*10 + '%; height: ' + $widget.size_y*10 + '%; float: left;">';
  switch($widget.widget_name){
    case "textFieldWidget":
      wHtml += '<div style="border-bottom: 2px dotted; width: 100%; height: 30px; margin: 5px;"><span style="position: relative; font-size: 11px; font-style: italic; color: #999; top: 16; left: 10;">' + $widget.name + '</span></div>';
    break;
    ...
    case "imageWidget":
      wHtml += '<div style="margin: 5px;"><img src="' + $widget.options[0].value + '" style="width: 100%; height: 100%;"></div>';
    break;
  }
  wHtml += '</div>';

  if($widget.section == 0){
    $header.append(wHtml);
  }
  ...
}

在循环期间，当附加了元素时，我在$header

附加了一个clearfix

$header.append('<div class="clear" style="clear: both;"></div>');

此时我需要计算$header高度以进行进一步处理，这是我陷入困境的部分。无论我使用.height()，.outerHeight()，.innerHeight()还是.prop("scrollHeight")，高度始终都会返回0.

console.log($header); // returns the $header object
console.log("Normal: " + $header.height()); // returns 0
console.log("Outer: " + $header.outerHeight()); // returns 0
console.log("Inner: " + $header.innerHeight()); // returns 0
console.log("Scroll: " + $header.prop("scrollHeight")); // returns 0

我尝试使用$(window).load()，但没有用。 div是可见的（display: block;）。我还尝试添加overflow: hidden;，但这不起作用

Answer 1

将元素附加到DOM后，浏览器需要渲染。等待时间过短你应该能够达到最高点。

首先确保将标题附加到DOM，否则它不会被渲染，因此永远不会达到高度。

document.body.appendChild($header);

$header.append('<div class="clear" style="clear: both;"></div>');
console.log($header); // returns the $header object

setTimeout(function(){

     console.log("Normal: " + $header.height()); 
     console.log("Outer: " + $header.outerHeight());
     console.log("Inner: " + $header.innerHeight());
     console.log("Scroll: " + $header.prop("scrollHeight"));
}, 100);

jQuery获取div的高度返回0

1 个答案: