javascript - 等高仅行与 javascript 没有表

Question

所以我遇到了这个问题，我似乎无法弄清楚我应该如何使 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 是set-only，您无法读取它。您可以使用 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 (点击运行查看结果)