使用mootools查找DOM对象是否可见的最佳方法

Question

查找DOM对象是否可见的最佳方法是什么？

当对象被认为不可见时的各种情况:

1. display:none;
2. 能见度:隐藏;
3. 其中一个父母有显示:无或可见性:隐藏
4. 另一个DOM元素模糊了查询元素(很高兴,但我没有它可以管理).
5. 屏幕边界之外的项目.

Answer 1

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

Answer 2

因为它的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