仅等高行与没有表的 javascript

Question

所以我遇到了这个问题，我似乎无法弄清楚如何使 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>

Answer 1

更改

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为您提供带有填充和边框的高度。（如何使用javascript更改元素的偏移高度？）

JSFiddle（点击运行查看结果）