ThecheckVisibility() method of theElement interface checks whether the element is visible.

The method returnsfalse in either of the following situations:

• The element doesn't have an associated box, for example because the CSSdisplay property is set tonone orcontents.
• The element is not being rendered because the element or an ancestor element sets thecontent-visibility property tohidden.

The optional parameter enables additional checks to test for other interpretations of what "visible" means.For example, you can further check whether an element has an opacity of0, if the value of the elementvisibility property makes it invisible, or if the elementcontent-visibility property has a value ofauto and its rendering is currently being skipped.

Syntax

checkVisibility(options)

Parameters

optionsOptional

An object indicating additional checks to run.The possible options are:

contentVisibilityAuto

true to check if the elementcontent-visibility property has (or inherits) the valueauto, and it is currently skipping its rendering.false by default.

opacityProperty

true to check if the elementopacity property has (or inherits) a value of0.false by default.

visibilityProperty

true to check if the element is invisible due to the value of itsvisibility property.false by default.

Note:Invisible elements include those that havevisibility: hidden, and some element types that havevisibility: collapse.

checkOpacity

A historic alias foropacityProperty.

checkVisibilityCSS

A historic alias forvisibilityProperty.

Return value

false if any of the following conditions are met, otherwisetrue:

• The element doesn't have an associated box.
• The elementcontent-visibility property has (or inherits) a value ofhidden.
• opacityProperty (orcheckOpacity) istrue and the elementopacity property has (or inherits) a value of0.
• visibilityProperty (orcheckVisibilityCSS) istrue and the element is invisible due to the value of itsvisibility property.
• contentVisibilityAuto istrue, thecontent-visibility property has (or inherits) a value ofauto, and element rendering is being skipped.

Examples

Test checkVisibility() with varied CSS

The following example allows you to test how the result ofcheckVisibility() might change with different values fordisplay,content-visibility,visibility, andopacity CSS properties.

HTML

The HTML defines a<select> element for the CSS properties that affect the results ofcheckVisibility().The first (default selected) values should result incheckVisibility() returningtrue when applied to an element, while the other values affect the visibility.

<select name="css_display">  <option value="block" selected>display: block</option>  <option value="none">display: none</option>  <option value="contents">display: contents</option></select><select 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 name="css_opacity">  <option value="1" selected>opacity: 1</option>  <option value="0">opacity: 0</option></select><select name="css_visibility">  <option value="visible" selected>visibility: visible</option>  <option value="hidden">visibility: hidden</option>  <option value="collapse">visibility: collapse</option></select>

Next we have a<pre> that is used to output the result of thecheckVisibility() check when no options are passed in the parameter, and for each separate option value.At the end we have the element that will be tested (to which we will apply the selected CSS property values).

<pre></pre><div>The element to be checked for visibility.</div>

CSS

The CSS just highlights the element to be tested.

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

JavaScript

The code below gets each of the<select> elements.TheupdateCSS() method is called on start and whenever the select elements change in order to apply the selected CSS to the target element,

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}`;}

Result

The results are shown below.If you change the selection the results will be applied to the test element (blue outline) and the results of thecheckVisibility() for each setting should be displayed.So for example, if you set theopacity: 0 that test (only) should indicatefalse.However if you setdisplay: none then all tests should returnfalse.

Specifications

Browser compatibility