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 を返すようにし、他の値は可視性に影響します。
<select id="css_display" name="css_display">
<option value="block" selected>display: block</option>
<option value="none">display: none</option>
<option value="content">display: content</option>
</select>
<select id="css_content_visibility" 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 id="css_opacity" name="css_opacity">
<option value="1" selected>opacity: 1</option>
<option value="0">opacity: 0</option>
</select>
<select id="css_visibility" 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 プロパティ値が適用される要素）があります。
<pre id="output_result"></pre>
<div id="test_element">可視性を検査する要素</div>
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 を返すはずです。
仕様書
| Specification |
|---|
| CSSOM View Module # dom-element-checkvisibility |
ブラウザーの互換性
Loading…