jqueryの is(":visible") をノーマルjsだけでサクっと判定する（※要素が表示されているか親／祖先要素の状態も加味して判定する）

Last updated at 2024-08-15Posted at 2024-08-14

jQueryでは、is(":visible") で要素の表示状態が簡単に取れていた。親要素を辿って表示状態を見て１つでも非表示であれば子孫も見えないと判断してくれたのに、脱jQueryしたことで途端にparentElement追う面倒くさい再帰ロジックを書く羽目になっていた。

getBoundingClientRect() や IntersectionObserver() などは、今の画面上の可視領域上での要素の表示判定なので目的に適ってない。

結論から言うと調べ方が足りんかった。というか新機能のアップデート¹をウォッチしてなくて自分の脳みそもアップデートしていないだけだった。

んで、ついさっきデベロッパーコンソールで、要素 . で出てくる入力アシストのリスト見てたら、「なんだこれは！！」なメソッドを見つけた次第。

名前からしてそのもの！

checkVisibilityだと〜！！これやーーーん！

しかもオプションでopacityの扱いも指定できる。is(":visible")より優れてる。