Элемент: метод checkVisibility()

Метод checkVisibility() интерфейса Element проверяет, является ли элемент видимым.

Метод возвращает false в следующих ситуациях:

• У элемента нет связанного блока, например, потому что свойство CSS display установлено в значение none или contents.
• Элемент не отображается, потому что элемент или предковый элемент устанавливает свойство content-visibility в значение hidden.

Необязательный параметр позволяет выполнять дополнительные проверки для определения различных интерпретаций понятия «видимость». Например, можно дополнительно проверить, имеет ли элемент непрозрачность 0, если значение свойства элемента visibility делает его невидимым, или если свойство элемента content-visibility имеет значение auto и его отображение в данный момент пропускается.

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, и отображение элемента пропускается.

В следующем примере показано, как результат checkVisibility() может изменяться при различных значениях display, content-visibility, visibility, и opacity свойств CSS.

HTML

HTML определяет элемент <select> для свойств CSS, которые влияют на результаты checkVisibility(). Первые (выбранные по умолчанию) значения должны приводить к тому, что 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.