Die beste Methode, um herauszufinden, ob ein DOM-Objekt sichtbar ist oder nicht, verwenden Sie mootools

Question

Was ist der beste Weg zu finden, ob ein DOM-Objekt sichtbar ist?

Verschiedene Fälle, wenn das Objekt als nicht sichtbar:

1. display: none;
2. Sichtbarkeit: versteckt;
3. einer der Eltern hat display: none oder visibility: hidden
4. Ein weiteres DOM-Element ist das Element abgefragt Verschleierung (Nizza zu haben, aber ich kann ohne es verwalten).
5. Artikel außerhalb der Bildschirmgrenzen.

Answer 1

seit seinen Mootools und diese mit auf der Mootools Mail-Liste behandelt wurden, und es ist jetzt ein Teil von Element.shortcuts sein werde ...

/* 
* 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 2

Stolen aus 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 3

Sieht aus wie die isVisible oben war gegeben Methode included in der mootools mehr Element.Shortcuts.

Keine dieser Methoden berücksichtigt jedoch den Bildlaufstatus des Browsers. Die folgende Methode scheint für mich ziemlich gut zu funktionieren, um die in der ursprünglichen Frage angegebene Anforderung # 5 zu erfüllen.

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

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

Answer 4

<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 5

/** 
* 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; 
}