Как узнать, отображается ли элемент DOM?
Не следует путать с "Как узнать, виден ли элемент DOM?"
Я хочу определить, отображается ли данный элемент DOM на странице.
Например. если элемент является дочерним по отношению к родительскому элементу, для которого установлен display:none;, он не будет виден.
(Это не имеет никакого отношения к тому, находится ли элемент в области просмотра или нет)
Я мог бы перебрать каждый родительский элемент, проверяя стиль display, но я хотел бы знать, есть ли более прямой способ?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Из быстрого теста в Firefox, похоже, что все свойства размера и положения (clientWidth, offsetTop и т. д.) Возвращают 0, когда элемент скрыт родительским элементом, являющимся display:none.
В текущем проекте модуля просмотра CSSOM (2013 г.) ссылка, размещенная @Kornel, больше не указывает на правый раздел. Проверьте w3.org/TR/cssom-view/#dom-htmlelement-offsettop.
Используя Прототип:
if ($('someDiv').visible) {...}
Было бы более полезно, если бы вы предоставили исходный код для этой функции Prototype, чтобы показать, как это можно сделать на самом деле.
Пользуюсь только библиотекой. Я этого не писал.
Поскольку я использую MochiKit, на основе ответа Ant P я пришел к следующему:
getElementPosition('mydiv').y != 0
Я также могу проверить, находится ли он в области просмотра (по вертикали):
y = getElementPosition('mydiv').y
(y < getViewportPosition().y + getViewportDimensions().h &&
getViewportPosition().y < y)
Кстати, это работает и в IE6.
Полагаться на позицию, равную 0, хрупко. Лучше написать вспомогательную функцию для перебора родителей, чтобы напрямую проверить их стиль отображения.
Хотите уточнить? Если он находится в стандарте, поддерживается группой, соответствующей стандартам (FF, WebKit,…), и поддерживается несовместимой гориллой, что делает его хрупким?
Вот итеративное решение -
var elementShown = function(e){
if (e == document)
return true;
if ($(e).css('display') == 'none') //or whatever your css function is
return false;
return elementShown(e.parentNode);
}
.getClientRects() вернет пустой массив, если элемент не отображается по наследству (display = "none" из родительского / предкового элемента)
Хорошая идея. Даже указано: w3.org/TR/cssom-view/#offset-attributes