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

Question

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

对象被视为不可见的各种情况：

1. 显示：无；
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

Answer 3

看起来上面给出的 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;
    }
}
});

Answer 4

/**
 * Checks display and visibility of elements and it's parents
 * @param  DomElement  el
 * @param  boolean isDeep Watch parents? Default is true
 * @return {Boolean}
 *
 * @author Oleksandr Knyga <oleksandrknyga@gmail.com>
 */
function isVisible(el, isDeep) {
    var elIsVisible = true;

    if("undefined" === typeof isDeep) {
        isDeep = true;
    }

    elIsVisible = elIsVisible && el.offsetWidth > 0 && el.offsetHeight > 0;

    if(isDeep && elIsVisible) {

        while('BODY' != el.tagName && elIsVisible) {
            elIsVisible = elIsVisible && 'hidden' != window.getComputedStyle(el).visibility;
            el = el.parentElement;
        }
    }

    return elIsVisible;
}

Answer 5

<script type="text/javascript">

    function isObjVisibile(obj){

        return obj.offsetTop != -1;
    }
</script>


<input type=button onclick="alert(isObjVisibile(document.getElementById('myTest')))" value='is visible'>
<input type=button onclick="document.getElementById('test2').style.display = 'none';" value='hide'>
<div id='test2'>
<div id='myTest'>test</div>
</div>

Answer 6

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

但是，当元素是透明的时，它仍然不能很好地工作。