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 这样的选择器，所以我必须找到不同的方法。 任何想法如何做到这一点？现在我收到以下错误:

Uncaught Error: SYNTAX_ERR: DOM Exception 12

在 zepto 文档中我读到了这个......

For basic support of jQuery’s non-standard pseudo-selectors such as :visible, include the optional “selector” module.

但我不知道如何包含它。

有人可以帮我吗？提前谢谢你。

Answer 1

您可以检查显示 CSS 属性:

 function show_guides() {

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

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