使用 mootools 查找 DOM 对象是不是可见的最佳方法 [关闭]

Posted 2023-02-21

【中文标题】使用 mootools 查找 DOM 对象是不是可见的最佳方法 [关闭]

【英文标题】：Best way to find if a DOM object is visible or not, using mootools [closed]使用 mootools 查找 DOM 对象是否可见的最佳方法 [关闭]

【发布时间】：2010-11-06 13:57:09

【问题描述】：

判断 DOM 对象是否可见的最佳方法是什么？

物体被认为不可见的各种情况：

显示：无； 可见性：隐藏； 其中一位父母显示：无或可见性：隐藏 另一个 DOM 元素遮挡了查询的元素（很高兴，但我可以管理 没有它）。 屏幕边界之外的项目。

【问题讨论】：

类似问题（非特定框架）：***.com/questions/704758/…

确实如此。虽然下面的漂亮脚本没有出现在那里....

【参考方案1】：

Dimitar 的解决方案不适用于可见性为“隐藏”的元素。

hidden

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

当父母的可见性被“隐藏”时，卢卡的解决方案效果不佳，但是，孩子的可见性不是。

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

但是，当元素是透明的时候还是不行。

【参考方案2】：

/**
 * 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 <[e-mail]>
 */
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;

【参考方案3】：

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

【参考方案4】：

看起来上面给出的 isVisible 方法是 mootools more Element.Shortcuts 中的included。

但是，这些方法都没有考虑浏览器的滚动状态。以下方法对我来说似乎非常适合满足原始问题中所述的要求 #5。

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

        return winScroll.y <= coord.top;
     else 
        return false;
    

);

【讨论】：

完美。谢谢你。

这似乎总是返回真除非你滚动过去的元素。但是，如果您位于页面顶部并且页脚不可见，它仍然会返回 true。

【参考方案5】：

自从它的 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

【参考方案6】：

盗自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)

【讨论】：

必须在此脚本中添加第 4 点和第 5 点。