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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Автор: David Walsh

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree