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：如何檢查元素是否可見？

回答

相關問題