Как определить, отображается ли элемент DOM?

Question

Это не следует путать с "Как определить, видим ли элемент DOM?"

Я хочу определить, виден ли данный элемент DOM на странице. Например. если элемент является дочерним по отношению к родительскому элементу, для которого установлено display:none;, то он не будет виден.

(Это не имеет никакого отношения к тому, находится элемент в области просмотра или нет)

Я мог бы пройтись по каждому родительскому элементу, проверив стиль display, но я хотел бы знать, есть ли более прямой путь?

Answer 1

Из быстрого теста в Firefox похоже, что свойства размера и положения (clientWidth, offsetTop и т. Д.) Возвращают 0, когда элемент скрыт родительским существом display:none.

Answer 2

Использование Прототип :

if($('someDiv').visible) {...}

Answer 3

.getClientRects() вернет пустой массив, если элемент не отображается наследованием (display="none" от элемента parent / ancestor)

Answer 4

Вот итеративное решение -

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);
}

Answer 5

Полагаться на позицию, являющуюся 0, является хрупким. Вам лучше написать вспомогательную функцию для перебора родителей, чтобы напрямую проверить их стиль отображения.

Answer 6

Поскольку я использую MochiKit , я пришел к ответу Ant P:

getElementPosition('mydiv').y != 0

Я также могу проверить, находится ли он в окне просмотра (по вертикали):

y = getElementPosition('mydiv').y
(y < getViewportPosition().y + getViewportDimensions().h &&
    getViewportPosition().y < y)

Кстати, это также работает в IE6.