JavaScript元素offsetHeight返回for循环返回0 [英] Javascript element offsetHeight returns returns 0 in for loop

问题描述

当 i 等于2，或者当 i 大于1时（即，当循环内至少有2个元素时）， offsetHeight 返回正确的渲染高度（我显示在一个专门的 $（'＃testheight'）元素渲染的高度值进行检查。）

然而，当 i 等于1时， offsetHeight 会返回0，即使渲染元素有一个高度（有一个< img> 元素通过PHP在子元素内呈现）。 我找不到错误！请帮助！

pre $ 函数makeGrid（）{
var blocks = document.getElementById（grid_container）。
var pad = 0，cols = 3，newleft，newtop;
var max_height = 0;
var newoffsetheight = 0;
for（var i = 1; i if（i％cols == 0）{
newtop =（blocks [i-cols] .offsetTop + blocks [i-cols] .offsetHeight）+ pad;
max_height = Math.max（max_height，newtop + blocks [i-cols] .offsetHeight）;
blocks [i] .style.top = newtop +px;
newoffsetheight = blocks [i] .offsetHeight;

else {
if（blocks [i-cols]）{
newtop =（blocks [i-cols] .offsetTop + blocks [i-cols] .offsetHeight） +垫;
blocks [i] .style.top = newtop +px;
}
newleft =（blocks [i-1] .offsetLeft + blocks [i-1] .offsetWidth）+ pad;
blocks [i] .style.left = newleft +px;
newoffsetheight = blocks [i] .offsetHeight;
}
}
$（'＃testheight'）。html（newoffsetheight）;



解决方案

改进了代码，出： https://jsfiddle.net/0otvhgkg/8/

 函数renderGrid（）{
 var blocks = document.getElementById（grid_container）。 
 var pad = 0，cols = 3，newleft 
 var newtop = 0 
 var max_height = blocks.length？ blocks [0] .offsetHeight：0; 
 $ b $ for（var i = 1; i  if（i％cols == 0）{
 newtop =（blocks [i- cols] .offsetTop + blocks [i-cols] .offsetHeight）+ pad; 
 blocks [i] .style.top = newtop +px; 
 max_height = Math.max（max_height，newtop + blocks [i] .offsetHeight）; 
} else {
 if（blocks [i-cols]）{
 newtop =（blocks [i-cols] .offsetTop + blocks [i-cols] .offsetHeight）+ pad; 
 blocks [i] .style.top = newtop +px; 
 max_height = Math.max（max_height，newtop + blocks [i-cols] .offsetHeight）; 
} 
 newleft =（blocks [i-1] .offsetLeft + blocks [i-1] .offsetWidth）+ pad; 
 blocks [i] .style.left = newleft +px; 
 max_height = Math.max（max_height，newtop + blocks [i-1] .offsetHeight）; 
 
 
 $（'＃grid_container'）。css（'height'，max_height）; 
 
 window.addEventListener（load，renderGrid，false）; 
 window.addEventListener（resize，renderGrid，false）; 
  

问题是我们仅在创建新行时才计算max_height，并不关心第一行。

I am trying to dynamically get the height of a child element inside a three column grid.

When i is equal to 2 or when i is greater than 1 (i.e. when there are at minimum 2 elements inside the loop), offsetHeight returns the rendered height correctly (I display the rendered height value in a dedicated $('#testheight') element for checking.)

However when i is equal to 1, offsetHeight returns 0, even though the rendered element has a height (there is an <img> element rendered inside the child element via PHP).

I cannot find the error! Please help!

function makeGrid(){
  var blocks = document.getElementById("grid_container").children;
  var pad = 0, cols = 3, newleft, newtop;
  var max_height = 0;
  var newoffsetheight = 0;
  for(var i = 1; i < blocks.length; i++){
    if (i % cols == 0) {
      newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
      max_height = Math.max(max_height, newtop + blocks[i-cols].offsetHeight);
      blocks[i].style.top = newtop+"px";
      newoffsetheight = blocks[i].offsetHeight;
    }
    else {
      if(blocks[i-cols]){
        newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
        blocks[i].style.top = newtop+"px";
      }
      newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
      blocks[i].style.left = newleft+"px";
      newoffsetheight = blocks[i].offsetHeight;
    }
  }
  $('#testheight').html(newoffsetheight);
}

解决方案

improved the code, check it out: https://jsfiddle.net/0otvhgkg/8/

function renderGrid(){
var blocks = document.getElementById("grid_container").children;
var pad = 0, cols = 3, newleft
var newtop = 0
var max_height = blocks.length ? blocks[0].offsetHeight : 0;

    for(var i = 1; i < blocks.length; i++){
        if (i % cols == 0) {
            newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;     
          blocks[i].style.top = newtop+"px";
          max_height = Math.max(max_height, newtop + blocks[i].offsetHeight);
        } else {
            if(blocks[i-cols]){
                newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
                blocks[i].style.top = newtop+"px";
                max_height = Math.max(max_height, newtop + blocks[i-cols].offsetHeight);
            }
            newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
            blocks[i].style.left = newleft+"px";
            max_height = Math.max(max_height, newtop + blocks[i-1].offsetHeight);
        }
  }
    $('#grid_container').css('height', max_height);
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);

Problem was we calculated max_height only when new row was created and didn't care about the first row whatsoever.

这篇关于JavaScript元素offsetHeight返回for循环返回0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！