Element：checkVisibility() 方法
Element 介面的 checkVisibility() 方法檢查元素是否可見。
在以下任一情況下，此方法返回 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()
以下示例允許你測試 checkVisibility() 的結果如何隨 display、content-visibility、visibility 和 opacity CSS 屬性的不同值而變化。
HTML
HTML 定義了一個用於影響 checkVisibility() 結果的 CSS 屬性的 <select> 元素。第一個（預設選中）值在應用於元素時應導致 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">The element to be checked for visibility.</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() {
// Apply selected CSS properties to target element
elementToCheck.style.display = displayCssSelect.value;
elementToCheck.style.contentVisibility = contentVisibilityCssSelect.value;
elementToCheck.style.opacity = displayCssOpacity.value;
elementToCheck.style.visibility = displayCssVisibility.value;
// Call checkVisibility() on element using default and each of options
const defaultVisibilityCheck = elementToCheck.checkVisibility();
const opacityVisibilityCheck = elementToCheck.checkVisibility({
opacityProperty: true,
});
const cssVisibilityCheck = elementToCheck.checkVisibility({
visibilityProperty: true,
});
const contentVisibilityAutoCheck = elementToCheck.checkVisibility({
contentVisibilityAuto: true,
});
// Output the results of the tests
outputResult.innerText = `Checks on element below (may be hidden):
- Result of checkVisibility(): ${defaultVisibilityCheck}
- Result of checkVisibility({opacityProperty: true}): ${opacityVisibilityCheck}
- Result of checkVisibility({visibilityProperty: true}): ${cssVisibilityCheck}
- Result of checkVisibility({contentVisibilityAuto: true}): ${contentVisibilityAutoCheck}`;
}
結果
結果如下所示。如果你更改選擇，結果將應用於測試元素（藍色輪廓），並且應顯示每個設定的 checkVisibility() 結果。因此，例如，如果你設定 opacity: 0，則該測試（僅此測試）應指示 false。但是，如果你設定 display: none，則所有測試都應返回 false。
規範
| 規範 |
|---|
| CSSOM 檢視模組 # dom-element-checkvisibility |
瀏覽器相容性
載入中…