Определение видимости элемента с помощью свойства Element.offsetHeight

Определение видимости элемента с помощью свойства Element.offsetHeight

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

var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block" и т.д.

Обратите внимание на то, что здесь я не проверяю прозрачность элемента, потому что прозрачный элемент по-прежнему занимает место на экране. Проблема с вышеприведенной проверкой заключается в том, что вы можете добраться до стиля дочернего элемента, но это может никак не влиять на то, что для родительского элемента будет задано свойство display: none. Например, для дочернего элемента может быть задано свойство display со значением inline-block, а для родительского — со значением none. Из-за этого дочерний элемент будет оставаться невидимым. Достаточно странно, но проверка значения свойства offsetHeight у дочернего элемента может подсказать вам, является ли элемент видимым или нет:

var correctIsVisible = someElement.offsetHeight; // 0 для скрытого элемента, больше 0 для отображаемого элемента

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

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree