如何獲取設置display:none元素及子元素的寬高

由於元素設置了display:none時，頁面便不會對其渲染，導致無法獲取其元素的寬高。目前一般的做法都是先對其設置display:block，拿到數據再設置其為display:none。如此便可以了

代碼

如何獲取 id="ul" 元素的寬高？？？

html

<section class="section none">
  <div>
    <ul id="ul">
      <li>第 <span class="span">111</span>個</li>
      <li>第 <span class="span">222</span>個</li>
      <li>第 <span class="span">333</span>個</li>
    </ul>
  </div>
</section>

js

• 判斷元素是否隱藏

function isNone(el) {
  // 判斷是否是元素節點
  if (el.nodeType != 1) return
  const {
    display
  } = window.getComputedStyle(el)
  return display === 'none'
}

• 設置樣式

function setStyle(obj = {}, el) {
  for (let item in obj) {
    el.style[item] = obj[item]
  }
}

• 獲取元素的寬高

function getNoneStyle (el) {
  // 獲取隱藏元素
  let node = el
  while (node !== null && !isNone(node)) {
    node = node.parentNode
  }
  if (node === null) throw new Error('居然父元素都沒有，這種情況，基本不會出現')

  setStyle({
    display: 'block',
    visibility: 'hidden',
    position: 'absolute'
  }, node)

  const {
    clientHeight,
    clientWidth
  } = el
  setStyle({
    display: '',
    visibility: '',
    position: ''
  }, node)

  return {
    width: clientWidth,
    height: clientHeight
  }

}

通過設置樣式，基本都可以拿到元素的寬高，但是需要注意，理當先記錄元素之前的樣式，在獲取數據后，再還回去，避免覆蓋，導致樣式發生變化

參考鏈接

• link