Javascript: How to check if element is visible?

问题:

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 button triggers the function 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);     } } 

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

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:

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.

But I have no idea how to include this.

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

回答1:

You can check the display CSS property:

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

回答2:

try

     style.display="block"; 

and

     style.display="hidden"; 

回答3:

You can check visibility:visible/hidden, or display:block/none

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

回答4:

If all you want is to check visibility you can just use this

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

taken straight from the zepto selectors plugin. Otherwise you can just include the selectors module from https://github.com/madrobby/zepto/blob/master/src/selector.js as Felix Kling suggested

文章来源: Javascript: How to check if element is visible?