如何从纯JavaScript获取div的最长高度？

Question

I'm trying to achieve what can be achieved via jQuery but I'm avoiding jQuery for learning javascript. I'm trying to get the highest number from .map . This is what I've done so far.

function equalHeight(className) {
  var i = Array.from(document.getElementsByClassName(className));
  i.forEach(function(items) {
    console.info(Math.max(items.scrollHeight));
  });
}

but this logs nothing

console.info(items.scrollHeight);

logs all three numbers.

I know I'm missing an elementary mistake, Can someone point out what I'm doing wrong?

Basically, I want to get the longest height and set it to the rest of the divs

Answer 1

I would use .getBoundingClientRect() and just compare for every iteration

function equalHeight(className) {
  const elements = Array.from(document.getElementsByClassName(className));
  let highest = 0;

  elements.forEach(function(item) {
     const itemH = item.getBoundingClientRect().height;
     highest = itemH > highest ? itemH : highest;
  });

  return highest;
}

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 2

I am not 100% sure exactly what you are after, but a few things:

1) Switching from getElementsByClassName to querySelectorAll gives you an object that has forEach built in.

2) You were passing in only 1 value to Math.max

 function equalHeight(className) { var max = 0; document.querySelectorAll(className).forEach( function(el) { console.info(Math.max(el.scrollHeight, max)); if (el.scrollHeight > max) { max = el.scrollHeight; } } ); return max; } var max = equalHeight('.test'); console.info('Max div height:', max); 

 div { border: 1px dashed red; margin: 2px 0; } 

 <div class="test">one</div> <div class="test">one<br/>two</div> <div class="test">one<br/>two<br/>three</div> 

UPDATE

To your question "now how do I use this value as height for the rest of the divs":

 function getMaxHeight(className) { var max = 0; document.querySelectorAll(className).forEach( function(el) { console.info(Math.max(el.scrollHeight, max)); if (el.scrollHeight > max) { max = el.scrollHeight; } } ); return max; } function setHeight(className, height) { document.querySelectorAll(className).forEach( function(el) { el.style.height = height+'px'; } ); } var max = getMaxHeight('.test'); console.info('Max div height:', max); setHeight('.test', max); 

 div { border: 1px dashed red; margin: 2px 0; } 

 <div class="test">one</div> <div class="test">one<br/>two</div> <div class="test">one<br/>two<br/>three</div> 

But, once you do this then none of the DIVs will change height again.

You could set el.style.minHeight and then, check again if you change anything in the DIVs.