La meilleure façon de savoir si un objet DOM est visible ou non, en utilisant mootools

Question

Quel est le meilleur moyen de savoir si un objet DOM est visible?

Divers cas lorsque l'objet est considéré comme non visible:

1. display: none;
2. visibilité: caché;
3. l'un des parents a display: none ou visibility: hidden
4. Un autre élément DOM obscurcit l'élément interrogé (Nice d'avoir, mais je peux gérer sans lui).
5. Elément en dehors des limites de l'écran.

Answer 1

depuis ses Mootools et cela a traité sur la liste de courrier Mootools et il va maintenant faire partie de 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 2

volés de 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

On dirait que la méthode isVisible donnée ci-dessus était included dans la mootools plus Element.Shortcuts.

Toutefois, aucune de ces méthodes ne prend en compte l'état de défilement du navigateur. La méthode suivante semble fonctionner assez bien pour moi pour remplir l'exigence # 5 énoncée dans la question initiale.

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