Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

checkVisibility()

checkVisibility() は Element インターフェイスのメソッドで、この要素が可視状態であるかどうかを検査します。

このメソッドは以下のどちらかの場合に false を返します。

例えば CSS の display プロパティが none または contents に設定されている場合のように、要素に関連づけられたボックスがない場合。

要素または祖先要素が content-visibility プロパティを hidden に設定しているため、要素が描画されない場合。

オプションの引数を指定することで、「可視」の意味を他の解釈として検査することができます。 例えば、要素の不透明度が 0 であるかどうか、要素の visibility プロパティの値が不可視であるかどうか、要素 content-visibility プロパティの値が auto であり、現在その描画がスキップされているかどうかを追加で検査することができます。

DOM操作

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
checkVisibility
105
105
106
17.4
105
17.4
checkVisibility (options checkOpacity parameter)

`options.checkOpacity` パラメータ
105
105
106
17.4
105
17.4
checkVisibility (options checkVisibilityCSS parameter)

`options.checkVisibilityCSS` パラメータ
105
105
106
17.4
105
17.4
checkVisibility (options contentVisibilityAuto parameter)

`options.contentVisibilityAuto` パラメータ
121
121
122
17.4
121
17.4
checkVisibility (options opacityProperty parameter)

`options.opacityProperty` パラメータ
121
121
122
17.4
121
17.4
checkVisibility (options visibilityProperty parameter)

`options.visibilityProperty` パラメータ
121
121
122
17.4
121
17.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
checkVisibility(options)

実務での使いどころ

  • checkVisibility() の活用

    checkVisibility() は Element インターフェイスのメソッドで、この要素が可視状態であるかどうかを検査します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク