Element: checkVisibility() メソッド

Baseline 2024

Newly available

Since ⁨March 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

例えば CSS のdisplay プロパティがnone またはcontents に設定されている場合のように、要素に関連づけられたボックスがない場合。
要素または祖先要素がcontent-visibility プロパティをhidden に設定しているため、要素が描画されない場合。

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

構文

checkVisibility(options)

引数

options省略可

実行する追加チェックを示すオブジェクト。可能なオプションは以下の通りです。

contentVisibilityAuto: true を指定すると、要素content-visibility プロパティに値auto がある（または継承している）場合に、現在その描画がスキップされているかどうかを調べます。既定ではfalse です。
opacityProperty: true を指定すると、要素のopacity プロパティが0 の値である（または継承している）かどうかを調べます。既定ではfalse です。
visibilityProperty: true を指定すると、visibility プロパティの値によって要素が不可視になっているかどうかを調べます。既定ではfalse です。
メモ:不可視の要素には、visibility: hidden が設定された要素や、visibility: collapse が設定された要素が含まれます。
checkOpacity: opacityProperty の過去の別名です。
checkVisibilityCSS: visibilityProperty の過去の別名です。

返値

以下の条件に当てはまる場合はfalse、当てはまらない場合はtrue となります。

要素に関連づけられたボックスがない場合。
要素のcontent-visibility プロパティがhidden の値である（または継承している）場合。
opacityProperty（またはcheckOpacity）がtrue で、要素opacity プロパティの値が0 である（または継承している）場合。
visibilityProperty（またはcheckVisibilityCSS）がtrue で、visibility プロパティの値によって要素が不可視になっている場合。
contentVisibilityAuto がtrue で、content-visibility プロパティの値がauto の値で（または継承している）、要素の描画がスキップされている場合。

例

さまざまな CSS で checkVisibility() の検査

次の例では、display、content-visibility、visibility、opacity の各 CSS プロパティのさまざまな値の場合に、checkVisibility() の結果がどのように変化するかを検査することができます。

HTML

この HTML は<select> 要素をcheckVisibility() の結果に影響を与える CSS プロパティのために定義します。最初の値（選択された既定値）は、要素に適用されたときにcheckVisibility() がtrue を返すようにし、他の値は可視性に影響します。

html

<select name="css_display">  <option value="block" selected>display: block</option>  <option value="none">display: none</option>  <option value="content">display: content</option></select><select name="css_content_visibility">  <option value="visible" selected>content-visibility: visible</option>  <option value="hidden">content-visibility: hidden</option>  <option value="auto">content-visibility: auto</option></select><select name="css_opacity">  <option value="1" selected>opacity: 1</option>  <option value="0">opacity: 0</option></select><select name="css_visibility">  <option value="visible" selected>visibility: visible</option>  <option value="hidden">visibility: hidden</option>  <option value="collapse">visibility: collapse</option></select>

次に<pre> があり、引数にオプションを渡さなかった場合と、別個のオプション値が渡された場合のcheckVisibility() の検査の結果を出力するために使用します。最後には、検査される要素（選択された CSS プロパティ値が適用される要素）があります。

html

<pre></pre><div>可視性を検査する要素</div>

CSS

CSSはテストする要素を強調表示するだけです。

css

#test_element {  border: solid;  border-color: blue;}

JavaScript

下記のコードは、それぞれの<select> 要素を取得しています。始めにupdateCSS() メソッドが呼び出され、select 要素が変わるたびに、選択した CSS を対象とする要素に適用します。

const displayCssSelect = document.getElementById("css_display");const contentVisibilityCssSelect = document.getElementById(  "css_content_visibility",);const displayCssOpacity = document.getElementById("css_opacity");const displayCssVisibility = document.getElementById("css_visibility");const outputResult = document.getElementById("output_result");const elementToCheck = document.getElementById("test_element");updateCSS();const cssSelectors = document.querySelectorAll("select");cssSelectors.forEach((select) => {  select.addEventListener("change", (event) => {    updateCSS();  });});function updateCSS() {  // 選択した CSS プロパティを対象とする要素に適用する  elementToCheck.style.display = displayCssSelect.value;  elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;  elementToCheck.style.opacity = displayCssOpacity.value;  elementToCheck.style.visibility = displayCssVisibility.value;  // 既定および各オプションでは、要素に対して checkVisibility() を呼び出す  const defaultVisibilityCheck = elementToCheck.checkVisibility();  const opacityVisibilityCheck = elementToCheck.checkVisibility({    opacityProperty: true,  });  const cssVisibilityCheck = elementToCheck.checkVisibility({    visibilityProperty: true,  });  const contentVisibilityAutoCheck = elementToCheck.checkVisibility({    contentVisibilityAuto: true,  });  // テスト結果の出力  outputResult.innerText = `下記の要素の検査結果（非表示になる可能性あり）:- checkVisibility() の結果: ${defaultVisibilityCheck}- checkVisibility({opacityProperty: true}) の結果: ${opacityVisibilityCheck}- checkVisibility({visibilityProperty: true}) の結果: ${cssVisibilityCheck}- checkVisibility({contentVisibilityAuto: true}) の結果: ${contentVisibilityAutoCheck}`;}

結果

結果は下記に示す通りです。選択範囲を変更すると、その結果が（青い輪郭線の）検査要素に適用され、それぞれの設定に対するcheckVisibility() の結果が表示されます。例えば、opacity: 0 を設定した場合、その検査（のみ）はfalse を示すはずです。しかし、display: none と設定した場合は、すべての検査でfalse を返すはずです。