Как понять что элемент скрыт?

Скрытость элемента определяют по вычисленным стилям (`display`, `visibility`, `opacity`), размерам (`offsetParent`, размеры 0) или через `checkVisibility()`/`IntersectionObserver`. Способ зависит от вида «скрытости».

Способы проверки

getComputedStyle — стили

const style = getComputedStyle(el);
const hidden = style.display === 'none'
  || style.visibility === 'hidden'
  || style.opacity === '0';

offsetParent — display:none

Если элемент или предок имеет display: none, offsetParent равен null (кроме position: fixed):

const hidden = el.offsetParent === null;

Размеры

const hidden = el.offsetWidth === 0 && el.offsetHeight === 0;
// или
const rect = el.getBoundingClientRect();
const hidden = rect.width === 0 && rect.height === 0;

checkVisibility() (современный)

el.checkVisibility(); // display:none и content-visibility; visibility и opacity — с опциями { visibilityProperty: true, opacityProperty: true }

IntersectionObserver — виден ли во вьюпорте

Для проверки, находится ли элемент в области просмотра (а не скрыт стилями).

Разные «скрытости»

• display: none — нет в потоке, размеры 0, offsetParent = null.
• visibility: hidden — занимает место, но невидим.
• opacity: 0 — виден для layout, прозрачен.
• За вьюпортом / overflow — виден стилями, но не на экране → IntersectionObserver.

Коротко для собеседования

Скрытость проверяют: getComputedStyle (display/visibility/opacity), offsetParent === null (display:none), нулевые размеры (offsetWidth/Height, getBoundingClientRect), современный checkVisibility(), а видимость во вьюпорте — IntersectionObserver. display:none, visibility:hidden и opacity:0 проверяются по-разному.