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 |
浏览器兼容性
加载中…