Javascript：如何检查元素是否可见？ [英] Javascript: How to check if element is visible?

问题描述

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

i'm using the lightweight zepto.js framework and now I need to test if an element on the page is visible or not … this my case:

A按钮触发函数 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，如果不是，我想摆脱它。

If the $('#guides') are visible I want to save a cookie and if they are not I want to get rid of it.

然而zepto。 js不支持选择器，如：visible 所以我必须找到一种不同的方式。
任何想法如何做到这一点？现在我收到以下错误：

However zepto.js doesn't support selectors like :visible so I have to find a different way. Any ideas how to do that? Right now I'm getting the following error:

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

Uncaught Error: SYNTAX_ERR: DOM Exception 12

在zepto文档中我读过这个...

In the zepto documentation i've read this …

对于jQuery的基本支持非标准的伪选择器，如
：visible，包括可选的selector模块。

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

但我没有想法如何包含这个。

But I have no idea how to include this.

有谁可以帮助我在这里？提前谢谢。

Anybody out the who could help me out here? Thank you in advance.

推荐答案

您可以查看显示的CSS属性：

You can check the display CSS property:

 function show_guides() {

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

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

这篇关于Javascript：如何检查元素是否可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！