javascript - 仅等高的行，带有没有表的javascript

所以我有一个问题，我似乎不知道如何才能使lis的高度等于那一排中最高的一个。我让它工作，但它使所有的lis高度与最高的一样。这是我目前掌握的代码：https://codepen.io/benasl/pen/ooLrON?editors=1010

var max = -1;
var list = document.getElementsByTagName('li');

Array.prototype.forEach.call(list, function(child) {
  max = max > child.style.height ? max : child.offsetHeight;
  console.log(child.offsetHeight);
});
Array.prototype.forEach.call(list, function(child) {
  child.style.height = max + 'px';
});
 

ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

li {
  padding: 5px 10px;
  display:block;
  position:relative;
  height: 100%;
}

p {
  width: 100%;
}

<div class="row">
  <div class="col-sm-4">
    <ul>
      <li><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul>
  </div>

  <div class="col-sm-4">
    <ul>
      <li><p>testtesttestt esttesttesttes ttesttesttestte sttesttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul>
  </div>

  <div class="col-sm-4">
    <ul>
      <li><p>testtest testtes ttesttes ttesttesttestt esttestte assaas sasaas saassa sasasasaassa sttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul>
  </div>

</div>

最佳答案

改变

max = max > child.style.height ? max : child.offsetHeight;

到

max = max > child.offsetHeight ? max : child.offsetHeight;

仅设置了child.style.height，您无法读取它。你可以用window.getComputedStyle()获得高度。
例如：

var el = document.getElementById("myList");
var height = window.getComputedStyle(el, null).getPropertyValue("height");

offsetHeight提供带有填充和边框的高度。
（how to change the offsetHeight of a element using javascript?）
JSFiddle
（单击run查看结果）