如何确定显示属性设置为none的ul的高度？

Question

我正在尝试确定其display属性最初设置为none的ul（无序列表）的高度。单击菜单图标时，属性将更改为阻止。我试图用纯JavaScript来复制jquery的slideToggle。

Answer 1

这很有效。它扩展了ul捕获高度和宽度，并在呈现DOM之前将其折叠。

<style>
  #myId {
    display: none;
  }
  .display-block {
    display: block !important;
  }
</style>

<button onclick="expandMenu('myId')">Menu Item</button>

<ul id="myId">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<script>

  const element = document.getElementById('myId')
  element.style.display = 'block'
  let height = element.clientHeight
  let width = element.clientWidth
  console.log('height', height)
  console.log('width', width)
  element.style.display = 'none'

  function expandMenu(id) {

    const element = document.getElementById(id)
    element.classList.add('display-block')

    let height = element.clientHeight
    let width = element.clientWidth

    console.log('height', height)
    console.log('width', width)

  }

</script>

Answer 2

我不确定这是否是您正在寻找的内容，因为您没有提供示例，但请尝试window.getComputedStyle(element).getPropertyValue('height')