Как определить высоту ul, для свойства display которого установлено значение none?

Question

Я пытаюсь определить высоту ul (неупорядоченного списка), свойство отображения которого изначально было установлено равным none.Свойство меняется на блокировку при нажатии значка меню.Я пытаюсь скопировать слайд-тумблер jquery в чистом JavaScript.

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')