[解決済み] 要素がDOMに表示されているかどうかを確認する

質問

ある要素が表示されているかどうかを、純粋なJS（jQueryなし）でチェックする方法はありますか？

そこで、例えばこのページでは パフォーマンスバイク トップメニューの「お買い得情報」にカーソルを合わせると、お買い得情報のウィンドウが表示されますが、当初は表示されていませんでした。HTMLの中にはあるのですが、表示されていないのです。

では、あるDOM要素が与えられたとき、それが表示されているかどうかを確認するにはどうすればよいのでしょうか。試してみました。

window.getComputedStyle(my_element)['display']);

が、うまくいかないようです。 どの属性をチェックすればいいんだろう。思い当たる節があります。

display !== 'none'
visibility !== 'hidden'

他に見落としがあるかもしれないので、教えてください。

解決方法は？

によると このMDNドキュメント の場合、要素の offsetParent プロパティは null は、その親が表示スタイルプロパティによって非表示にされた場合、いつでも表示されます。 ただ、その要素が固定されていないことを確認してください。 これをチェックするスクリプトは、もし position: fixed; 要素で構成されたページでは、次のようになります。

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

一方、もし する は、この検索に引っかかる可能性のある位置固定の要素があるため、悲しいことに（徐々に） window.getComputedStyle() . その場合の関数は、次のようになるかもしれません。

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

しかし、この操作を何度も繰り返す必要がある場合は、おそらく避けた方がよいでしょう。