使用mootools查找DOM對象是否可見的最佳方法

Question

查找DOM對象是否可見的最佳方法是什麼？

各種情況下，當對象被認爲不可見：

1. 顯示：無;
2. 知名度：隱藏;
3. 父母一方有display：none或visibility：hidden的
4. 另一個DOM元素模糊查詢元素（最好有，但沒有它，我可以管理 ）。
5. 屏幕邊界之外的項目。

Answer 1

自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 2

被盜從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

看起來像上面給出的方法ISVISIBLE是included在mootools更多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

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