Лучший способ узнать, является ли объект DOM видимым или нет, с помощью mootools

так как его mootools и это были рассмотрены в списке рассылки mootools, и теперь он будет частью Element.shortcuts ...

/*
* Inspired from http://github.com/jeresig/sizzle/commit/7631f9c3f85e5fa72ac51532399cb593c2cdc71f
* and this http://github.com/jeresig/sizzle/commit/5716360040a440041da19823964f96d025ca734b
* and then http://dev.jquery.com/ticket/4512
*/

Element.implement({

  isHidden: function(){
    var w = this.offsetWidth, h = this.offsetHeight,
    force = (this.tagName === 'TR');
    return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
  },

  isVisible: function(){
    return !this.isHidden();
  }

});

http://gist.github.com/137880

Похищено с http://snippets.dzone.com/posts/show/5757:

function isVisible(obj)
{
    if (obj == document) return true

    if (!obj) return false
    if (!obj.parentNode) return false
    if (obj.style) {
        if (obj.style.display == 'none') return false
        if (obj.style.visibility == 'hidden') return false
    }

    //Try the computed style in a standard way
    if (window.getComputedStyle) {
        var style = window.getComputedStyle(obj, "")
        if (style.display == 'none') return false
        if (style.visibility == 'hidden') return false
    }

    //Or get the computed style using IE's silly proprietary way
    var style = obj.currentStyle
    if (style) {
        if (style['display'] == 'none') return false
        if (style['visibility'] == 'hidden') return false
    }

    return isVisible(obj.parentNode)
}

Похоже, что метод isVisible, указанный выше, был включен в mootools more Element.Shortcuts .

Однако ни один из этих методов не учитывает состояние прокрутки браузера. Следующий метод, похоже, очень хорошо работает для меня для выполнения требования № 5, указанного в исходном вопросе.

Element.implement({
isFullyVisible: function() {
    if(this.isVisible()) {
        var coord = this.getCoordinates(),
            winScroll = window.getScroll();

        return winScroll.y <= coord.top;
    } else {
        return false;
    }
}
});

Решение Dimitar не работает с элементом, видимость которого «скрыта».

hidden

Блок элемента невидим (не отображается), но по-прежнему влияет на макет как обычно.

И решение Луки не работает, когда видимость родителя «скрыта», однако видимость дочернего элемента - нет.

hidden

Потомки элемента будут видны, если для них задана видимость. Элемент не может получить фокус (например, при навигации по указателям вкладок).

Я смешал их ответы:

function isDisplayed(obj){
    if (window.getComputedStyle(obj, '').visibility === 'hidden')
        return false
    var w = obj.offsetWidth
    var h = obj.offsetHeight
    var force = (this.tagName === 'TR')
    return ! ( (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : window.getComputedStyle(obj, '').display  === 'none' )
}

Однако это по-прежнему не работает, когда элемент прозрачный.