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

【问题标题】：Javascript: How to check if element is visible?Javascript：如何检查元素是否可见？
【发布时间】：2012-07-08 15:20:13
【问题描述】：

我正在使用轻量级 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，包括可选的“选择器”模块。

但我不知道如何包含此内容。

有没有人能帮帮我？提前谢谢你。

【问题讨论】：

“但我不知道如何包含这个。” 与加载任何其他 JavaScript 文件的方式相同。加载 zepto 后包括 this file。

标签： javascript jquery selector visible zepto

【解决方案1】：

如果您只想检查可见性，您可以使用它

  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 中的选择器模块

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试

     style.display="block";

和

     style.display="hidden";

【讨论】：

【解决方案4】：

您可以检查显示 CSS 属性：

 function show_guides() {

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

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

【讨论】：

如果祖先被隐藏，这将不起作用。例如，隐藏 div 中的图像将返回“块”，即使它不可见，因为它的容器 div 被隐藏。