Help us understand the problem. What is going on with this article?

要素が表示されているかどうかをチェック

More than 1 year has passed since last update.

該当する要素だけでなく、親要素も表示されているかどうかをチェックしたい。
まだchromeでしか試してないが、このような結果になった。

  • 親要素が visibility: hidden だと子要素も visibility: hidden になる
  • 親要素が display: none だと、子要素の computedStyle.width、computedStyle.height が auto になる。または element.offsetParent が null になる
  • 親要素の height,width が 0px で、overflow: hidden の場合は、子要素で判定できないので、再帰的親要素をさかのぼってチェックする
export default function VisibilityCheck(targetElement: HTMLElement): boolean {
  if (targetElement.offsetParent === null) {
    return false
  }

  let target: HTMLElement | null = targetElement
  do {
    const style = getComputedStyle(target)

    if (style.display === 'none'
      || style.visibility !== 'visible'
      || parseFloat(style.opacity || '') <= 0.0
      || parseInt(style.height || '', 10) <= 0
      || parseInt(style.width || '', 10) <= 0
    ) {
      return false
    }

    target = target.parentElement
  } while (target !== null)

  return true
}
ichironagata
I ❤ programming!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away