Question

我正在对网页的元素进行块状隔离并在这些块周围绘制边框，但我注意到height如果0设置为display则为flex。在这种情况下如何获得高度？我尝试了几种方法，但都给了0

ul.offsetHeight // gives me 0
ul.clientHeight // gives me 0
ul.getBoundingClientRect() //gives me 0
window.getComputedStyle(ul).height //gives me 100%

//This also gives me 0
var range = document.createRange()
range.selectNodeContents(ul)
range.getBoundingClientRect()

修改

这与flex属性无关。它只是因为它只在屏幕上看不到而给予0。我不想删除这个问题，因为我已经花了很少的时间

Answer 1

您是否动态创建元素？您可能在创建之前尝试拉高度。赋予div一个id并调用它的height属性对我来说很好，所以你要么过早地提取数据，要么你自己将高度设置为0。

或者，如果您尝试一次调用每个ul元素而不是特定元素，则需要获得单个数组输出的高度，即ul[0]。

//Single Call
document.getElementById('one').innerHTML = document.getElementById('someDiv').clientHeight;

//Multi Call
var multi = document.getElementsByTagName('ul');
document.getElementById('two').innerHTML = multi[1].clientHeight;

ul {
  background: #f00;
  display: flex;
  flex-direction: column;
}

<p>
  <ul id="someDiv">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</p>
<p>
  <ul id="anotherDiv">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
<p>
<p>First ul Height: <span id="one"> - </span></p>
<p>Second ul Height: <span id="two"> - </span></p>

Answer 2

我只是这样试过，

＆＃13;

document.write(document.querySelector('ul').offsetHeight);

＆＃13;

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

＆＃13;

<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>

＆＃13;

当显示设置为flex时，如何获得UL元素的高度

2 个答案: