Question

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

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

display：none;
visibility：hidden;
其中一位家长有显示：无或可见性：隐藏
另一个DOM元素模糊了查询元素（很高兴，但我可以管理没有它。）。
屏幕边界之外的项目。

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中的included更多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

元素框不可见（未绘制），但仍然会影响布局。

当父母的可见度为“隐藏”时，Luca的解决方案效果不佳，但是，儿童的可见度不是。

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

但是，当元素透明时，它仍然无法正常工作。

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

6 个答案: