Element.checkVisibility în JavaScript

element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })

Ce face Element.checkVisibility

checkVisibility() returnează false dacă elementul sau un părinte are display: none sau content-visibility: hidden. Cu opțiunile checkOpacity și checkVisibilityCSS verifică și opacity: 0 și visibility: hidden.

Nu verifică dacă elementul este în zona vizibilă a ecranului; pentru asta folosește getBoundingClientRect sau IntersectionObserver.

Parametri

Parametru	Descriere
optiuni	Opțional. checkOpacity, checkVisibilityCSS.

Ce returnează

true sau false.

Exemple

Exemplul 1: Elemente ascunse în moduri diferite

<div id="a" style="display:none"><p id="copil">ascuns de părinte</p></div>
<p id="b" style="visibility:hidden">invizibil</p>

<script>
  console.log(document.getElementById("copil").checkVisibility());
  console.log(document.getElementById("b").checkVisibility());
  console.log(document.getElementById("b").checkVisibility({ checkVisibilityCSS: true }));
</script>

Rezultat în browser

false
true
false

Greșeli frecvente

• Verifici vizibilitatea cu element.style.display. Vezi doar stilul scris direct pe element, nu clasele CSS sau părinții.

Comenzi înrudite

• getBoundingClientRect / elementFromPoint: Returnează poziția și mărimea unui element pe ecran; elementFromPoint face invers, din coordonate în element.
• getComputedStyle: Returnează stilurile finale ale unui element, după aplicarea tuturor regulilor CSS.
• IntersectionObserver: Anunță când un element intră sau iese din zona vizibilă: încărcare leneșă, animații la derulare, derulare infinită.