От автора: Одной из (ощутимых) задач, вызывающих затруднения в процессе фронтенд разработки, является проверка видимости элемента. Очень наивным способом проверки видимости элемента (т.е. отображается ли элемент и занимает ли он место на странице) является проверка значения, указанного для стилевого свойства display.
|
1 |
var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block" и т.д. |
Обратите внимание на то, что здесь я не проверяю прозрачность элемента, потому что прозрачный элемент по-прежнему занимает место на экране. Проблема с вышеприведенной проверкой заключается в том, что вы можете добраться до стиля дочернего элемента, но это может никак не влиять на то, что для родительского элемента будет задано свойство display: none. Например, для дочернего элемента может быть задано свойство display со значением inline-block, а для родительского — со значением none. Из-за этого дочерний элемент будет оставаться невидимым. Достаточно странно, но проверка значения свойства offsetHeight у дочернего элемента может подсказать вам, является ли элемент видимым или нет:
|
1 |
var correctIsVisible = someElement.offsetHeight; // 0 для скрытого элемента, больше 0 для отображаемого элемента |
Если элемент является дочерним по отношению к элементу, имеющему свойство display: none, то свойство offsetHeight для дочернего элемента будет равно 0. Таким образом вы будете знать, что элемент является невидимым, несмотря на указанное для него значение свойства display. И снова напоминаю вам о том, что прозрачность здесь не рассматривается, т.к. элемент, для которого задано свойство opacity: 0, остается технически видимым, т.е. занимает место на странице.
Автор: David Walsh
Источник: //davidwalsh.name/
Редакция: Команда webformyself.
