Визначення видимості елементу з допомогою властивості Element.offsetHeight

25

Від автора: Однією з (відчутних) завдання, що викликають труднощі в процесі фронтенд розробки, є перевірка видимості елементу. Дуже наївним способом перевірки видимості елементу (тобто відображається елемент і займає він місце на сторінці) є перевірка значення, зазначеного для стильового властивості display.

var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue(‘display’); // «inline», «inline-block», «block» і т. д.

Зверніть увагу на те, що тут я не перевіряю прозорість елемента, тому що прозорий елемент, як і раніше займає місце на екрані. Проблема з вищенаведеної перевіркою полягає в тому, що ви можете дістатися до стилю дочірнього елемента, але це ніяк не може впливати на те, що для батьківського елемента буде встановлено властивість display: none. Наприклад, для дочірнього елемента може бути встановлено властивість display зі значенням inline-block, а для батьківського — зі значенням none. З-за цього дочірній елемент буде залишатися невидимим. Досить дивно, але перевірка значення властивості offsetHeight у дочірнього елемента може підказати вам, є елемент видимим або ні:

Якщо елемент є дочірнім по відношенню до елементу, що має властивість display: none, то властивість offsetHeight для дочірнього елемента буде дорівнює 0. Таким чином ви будете знати, що елемент є невидимим, незважаючи на зазначене для нього значення властивості display. І знову нагадую вам про те, що прозорість тут не розглядається, оскільки елемент, для якого встановлено властивість opacity: 0, залишається технічно видимим, тобто займає місце на сторінці.