Javascript：如何检查元素是否可见？

Question

我正在使用轻量级的zepto.js框架，现在我需要测试页面上的元素是否可见……这是我的情况：

按钮触发函数show_guides() 。

function show_guides() {
    $('#guides').toggle();

    if ( $('#guides').is(':visible') ) { // does not work
        //$.cookie('guides_visible', 'true');
        console.log("visible");
    } else {
        console.log("invisible");
        //$.cookie('guides_visible', null);
    }
}

如果$('#guides')是可见的，我想保存一个cookie，否则，我要删除它。

但是zepto.js不支持:visible类的选择器，因此我必须找到其他方法。 任何想法如何做到这一点？ 现在，我收到以下错误：

未捕获的错误：SYNTAX_ERR：DOM异常12

在zepto文档中，我已经读过了……

为了对jQuery的非标准伪选择器（如：visible）提供基本支持，请包括可选的“选择器”模块。

但是我不知道如何包括这个。

有人可以帮助我吗？ 先感谢您。

Answer 1

您可以检查display CSS属性：

 function show_guides() {

        $('#guides').toggle();

        if ( $('#guides').css('display') == 'block' ) { 
            console.log("visible");
        } else {
            console.log("invisible");
        }
    }

Answer 2

尝试

     style.display="block";

和

     style.display="hidden";

Answer 3

您可以检查可见性：可见/隐藏，或显示：阻止/无

$('#guides').css('visibility') == 'visible'
$('#guides').css('display') == 'block'

Answer 4

如果您只想查看可见性，则可以使用此功能

  function visible(elem){
    elem = $(elem)
    return !!(elem.width() || elem.height()) && elem.css("display") !== "none"
  }

直接从zepto选择器插件获取。 否则，您可以按照Felix Kling的建议从https://github.com/madrobby/zepto/blob/master/src/selector.js包含选择器模块。