如何检查元素在 Zepto 中是否可见答案

【问题标题】：How to check if element is visible in Zepto如何检查元素在 Zepto 中是否可见
【发布时间】：2012-04-21 10:30:21
【问题描述】：

Zepto 不支持jQuery 的.is(':visible') 技术。

那么如何检查一个元素是否可见？

【问题讨论】：

【解决方案1】：

我从未使用过 Zepto，但是：

.css('display') !== 'none'

可能会起作用。 Here's a demo.

【讨论】：

问题不问元素是否没有隐藏。如果元素设置为visibility:hidden怎么办？
@minitech 不错/谢谢——我想就是这样。我不确定 Zepto 是否内置了另一种方法。如果您查看其 .toggle() 方法的来源，Bonzo (github.com/ded/bonzo) 基本上也会这样做。它检查原生el.style.display !== 'none' 以及是否有宽度或高度。
@Jamie “visibility: hidden 或 opacity: 0 的元素被认为是可见的，因为它们仍然占用布局中的空间”根据api.jquery.com/visible-selector

【解决方案2】：

我对 Zepto 不太熟悉，但是我想您可以只使用基本的 JavaScript 来进行某种形式的检测：

function isVis(ele) {
    if(ele.css('display')!='none' && ele.css('visibility')!='hidden' && ele.height()>0) {
        return(true);
    } else {
        return(false);
    }
}

然后在使用中：

var div=$('#div_id');
if(isVis(div)) {
    // Element is visible
} else {
    // Element in not visible
}

【讨论】：

请注意，block 并不是唯一可能可见的 display 类型。有inline、inline-block、table、table-row、table-cell……你懂的。
@minitech 关于显示类型是正确的。作为一个黑客，我认为这可能是最好的解决方案

【解决方案3】：

Zepto 有一些官方扩展。您可以包含 selector 模块来启用.is(':hidden')

【讨论】：

【解决方案4】：

怎么样

.css('display') === 'block'

或者，正如 minitech 建议的那样：

.css('display') !== 'hidden'

如果你真的需要使用这些伪选择器，你可以随时implement them manually。

【讨论】：

Zepto 不支持:hidden。
不可见元素有display=none 而不是display=hidden