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

我使用的是轻量级的zepto.js框架，现在我需要测试页面上的元素是否可见或不...这是我的情况：Javascript：如何检查元素是否可见？

一个按钮触发函数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

在仄文档我读过这...

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

但我不知道如何将之纳入。

有谁能帮我出来吗？先谢谢你。

来源

2012-07-09 matt

*“但我不知道如何包括这个。”*加载任何其他JavaScript文件的相同方式。加载zepto后包括[此文件]（https://github.com/madrobby/zepto/blob/master/src/selector.js）。 – 2012-07-09 08:35:31

您可以检查显示器的CSS属性：

function show_guides() { 

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

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

来源

2012-07-09 08:32:02 sdespont

如果祖先隐藏，这不起作用。例如，隐藏div内的图像将返回'block'，即使它不可见，因为它的容器div是隐藏的。 – 2013-02-28 01:32:47

尝试

 style.display="block";

和

 style.display="hidden";

来源

2012-07-09 08:34:45 Avinash

您可以检查可见：可见/隐藏，或显示：块/无

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

来源

2012-07-09 08:49:50 fedmich

如果你想要的是检查可见你可以使用这个

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

从仄选择直取插件。否则，你可以包含从https://github.com/madrobby/zepto/blob/master/src/selector.js选择器模块作为菲利克斯克林建议

来源

2013-05-13 19:55:05 Zaptree

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

回答

相关问题