Javascript: Comment faire pour vérifier si un élément est visible?

je suis en utilisant le léger zepto.js cadre et maintenant j'ai besoin de tester si un élément de la page est visible ou pas ... c'est mon cas:

Un bouton déclenche la fonction 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);
    }
}

Si le $('#guides') sont visibles je veux enregistrer un cookie et si elles ne sont pas, je veux me débarrasser d'elle.

Cependant zepto.js ne prend pas en charge les sélecteurs comme :visible donc je dois trouver un autre moyen.
Toutes les idées de comment faire cela? Droit maintenant, je reçois le message d'erreur suivant:

Erreur non interceptée: SYNTAX_ERR: DOM Exception 12

Dans le zepto la documentation que j'ai lu cela ...

Pour support de base de jQuery non standard de la pseudo-sélecteurs comme
:visible, inclure l'option “sélecteur de module”.

Mais je n'ai aucune idée de la façon d'inclure cette.

Quelqu'un qui pourrait m'aider ici? Je vous remercie à l'avance.

  • "Mais je n'ai aucune idée de la façon d'en tenir compte." De la même manière que vous chargez un autre fichier JavaScript. Include ce fichier après avoir chargé zepto.
InformationsquelleAutor matt | 2012-07-09
  1. 3

    Vous pouvez vérifier l'affichage de la propriété CSS:

     function show_guides() {

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

        if ( $('#guides').css('display') == 'block' ) { 
            console.log("visible");
        } else {
            console.log("invisible");
        }
    }
    • Cela ne fonctionne pas si un ancêtre est caché. Par exemple, une image à l'intérieur d'un div caché serait de retour "en bloc", même si elle n'est pas visible car il est div conteneur qui est caché.
    InformationsquelleAutor sdespont
  2. 1

    essayer 

         style.display="block";

    et

         style.display="hidden";
    InformationsquelleAutor Avinash
  3. 1

    Vous pouvez vérifier visibility:visible/caché, ou display:block/aucun

    $('#guides').css('visibility') == 'visible'
$('#guides').css('display') == 'block'
    InformationsquelleAutor fedmich
  4. 1

    Si tout ce que vous voulez est de vérifier la visibilité, vous pouvez simplement utiliser ce

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

    pris directement à partir de la zepto sélecteurs de plugin. Sinon, vous pouvez simplement inclure les sélecteurs module de https://github.com/madrobby/zepto/blob/master/src/selector.js que Felix Kling suggéré

    InformationsquelleAutor Zaptree