如何使用 JavaScript 檢查元素是隱藏還是可見

在 JavaScript 中，檢查一個元素在 DOM 中是隱藏還是可見的最快方法是使用 getComputedStyle() 方法。此方法返回用於在 DOM 中呈現 HTML 元素的 CSS 屬性的實際值。

假設我們有以下隱藏的 HTML 元素：

.hidden {
    display: none;
}

<button class="hidden">Click Me!</button>

由於 display:none 可以隱藏 HTML 元素 或 visibility:hidden CSS 屬性。

讓我們編寫一個函數來檢查這兩個屬性並返回一個描述元素可見性狀態的布爾值：

const isHidden = elem => {
  const styles = window.getComputedStyle(elem)
  return styles.display === 'none' || styles.visibility === 'hidden'
}

const elem = document.querySelector('button')
if (isHidden(elem)) {
  console.log(`Element is hidden!!`)
} else {
  console.log(`Element is visible!!`)
}
// Element is hidden!!

如果你使用 jQuery，你可以使用 :hidden 和 :visible 用於檢查 DOM 元素是隱藏還是可見的選擇器：

// Check if element is hidden
if ($('button').is(':hidden')) {
  console.log(`Element is hidden!!`)
}

// Check if element is visible
if ($('button').is(':visible')) {
  console.log(`Element is visible!!`)
}