Best way to find if a DOM object is visible or not, using mootools [closed]

问题

What is the best way to find if a DOM object is visible?

Various cases when object is considered not visible:

display: none;
visibility: hidden;
one of the parents has display: none or visibility: hidden
Another DOM element is obscuring the queried element (Nice to have, but I can manage without it).
Item outside of screen boundaries.

回答1:

since its mootools and this got dealt with on the mootools mail list and it is now going to be a part of 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

回答2:

Stolen from 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)
}

回答3:

Looks like the isVisible method given above was included in the mootools more Element.Shortcuts.

However neither of these methods account for the scroll state of the browser. The following method seems to work pretty well for me for fulfilling requirement #5 stated in the original question.

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

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

回答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;
}

回答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>

回答6:

Dimitar's solution doesn't work well with the element whose visibility is 'hidden'.

hidden

The element box is invisible (not drawn), but still affects layout as normal.

And Luca's solution doesn't work well when the visibility of parent is 'hidden', however, the visibility of child is not.

hidden

Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

So I mixed their answers:

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

However, it still doesn't work well when the element is transparent.

来源：https://stackoverflow.com/questions/1056357/best-way-to-find-if-a-dom-object-is-visible-or-not-using-mootools

标签

javascript

mootools