元素：checkVisibility() 方法

基线 2024

新可用

自 2024 年 3 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能无法在较旧的设备或浏览器中使用。

checkVisibility() 是 Element 接口的一个方法，用于检查元素是否可见。

在以下任一情况下，该方法将返回 false

可选参数启用其他检查，以测试“可见”的含义的其他解释。例如，您可以进一步检查元素是否具有 0 的不透明度，元素的 visibility 属性的值是否使其不可见，或者元素的 content-visibility 属性的值是否为 auto 并且当前正在跳过其渲染。

语法

js
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 定义了一个 <select> 元素，用于影响 checkVisibility() 结果的 CSS 属性。第一个（默认选中）值应导致 checkVisibility() 在应用于元素时返回 true，而其他值会影响可见性。

html
<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 属性值）。

html
<pre id="output_result"></pre>
<div id="test_element">The element to be checked for visibility.</div>

CSS

CSS 只是突出显示要测试的元素。

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

JavaScript

以下代码获取每个 <select> 元素。updateCSS() 方法在启动时以及选择元素更改时调用，以便将选定的 CSS 应用于目标元素，

js
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

浏览器兼容性

BCD 表格仅在浏览器中加载