javascript screen - Comment vérifier si un élément est caché dans jQuery?




when event (25)

Il est possible de basculer la visibilité d'un élément à l'aide des fonctions .hide() , .show() ou .toggle() .

Comment testeriez-vous si un élément est visible ou caché?


Answers

Pour vérifier si ce n'est pas visible j'utilise ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

Vous pouvez également utiliser sam, en enregistrant le sélecteur jQuery dans une variable pour améliorer les performances lorsque vous en avez besoin plusieurs fois:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

Utilisez la commutation de classe, pas la modification de style. . .

L'utilisation de classes désignées pour "masquer" des éléments est simple et constitue l'une des méthodes les plus efficaces. Le fait de basculer une classe "masquée" avec un style d' Display de "néant" fonctionnera plus rapidement que de le modifier directement. J'ai expliqué en détail certaines de ces difficultés dans la question Débordement de pile Tournant deux éléments visibles / cachés dans le même div .

Meilleures pratiques et optimisation JavaScript

Voici une vidéo vraiment enrichissante d'un Google Tech Talk de Nicholas Zakas, ingénieur front-end de Google:


if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

Puisque la question fait référence à un seul élément, ce code pourrait être plus approprié:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Identique à la suggestion de twernt , mais appliquée à un seul élément; et il correspond à l'algorithme recommandé dans la FAQ jQuery


On peut simplement utiliser l'attribut hidden ou visible , comme:

$('element:hidden')
$('element:visible')

Ou vous pouvez simplifier la même chose avec est comme suit.

$(element).is(":visible")

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

La source:

Blogger Plug n Play - Outils et widgets jQuery: Comment savoir si un élément est masqué ou visible à l'aide de jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj


Vous devez vérifier les deux ... Affichage ainsi que la visibilité:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Si nous vérifions $(this).is(":visible") , jQuery vérifie les deux choses automatiquement.


Souvent, lorsque vous vérifiez si quelque chose est visible ou non, vous allez immédiatement aller de l'avant et faire autre chose avec cela. Le chaînage jQuery facilite les choses.

Donc, si vous avez un sélecteur et que vous souhaitez effectuer une action sur celui-ci uniquement s'il est visible ou masqué, vous pouvez utiliser le filter(":visible") ou le filter(":hidden") suivi de l'enchaînement avec l'action souhaitée. prendre.

Donc au lieu d’une déclaration if , comme ceci:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Ou plus efficace, mais encore plus laid:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Vous pouvez tout faire en une seule ligne:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

La méthode ci-dessus ne prend pas en compte la visibilité du parent. Pour considérer également le parent, vous devez utiliser .is(":hidden") ou .is(":visible") .

Par exemple,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

La méthode ci-dessus considérera div2 visible tandis que :visible non. Mais ce qui précède peut être utile dans de nombreux cas, en particulier lorsque vous avez besoin de savoir s’il existe des divisions d’erreur visibles dans le parent masqué, car dans ces conditions :visible ne fonctionnera pas.


De Comment puis-je déterminer l'état d'un élément basculé?

Vous pouvez déterminer si un élément est réduit ou non en utilisant les sélecteurs :visible et :hidden .

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Si vous agissez simplement sur un élément en fonction de sa visibilité, vous pouvez simplement inclure :visible ou :hidden dans l'expression du sélecteur. Par exemple:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Lors du test d'un élément contre :hidden sélecteur :hidden dans jQuery, il convient de considérer qu'un élément positionné en absolu peut être reconnu comme étant masqué, bien que ses éléments enfants soient visibles .

Cela semble un peu contre-intuitif en premier lieu - bien que regarder de plus près la documentation de jQuery donne les informations pertinentes:

Les éléments peuvent être considérés comme masqués pour plusieurs raisons: [...] Leurs largeur et hauteur sont explicitement définies sur 0. [...]

Cela a donc du sens en ce qui concerne le modèle de boîte et le style calculé pour l'élément. Même si largeur et hauteur ne sont pas explicitement définies sur 0, elles peuvent être définies de manière implicite .

Regardez l'exemple suivant:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

MISE À JOUR POUR JQUERY 3.x:

Avec jQuery 3, le comportement décrit va changer! Les éléments seront considérés comme visibles s'ils ont des zones de mise en page, y compris celles de largeur et / ou hauteur zéro.

JSFiddle avec jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Le même JS aura alors cette sortie:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

Vous pouvez également le faire en utilisant du JavaScript simple:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Remarques:

  1. Fonctionne partout

  2. Fonctionne pour les éléments imbriqués

  3. Fonctionne pour les styles CSS et inline

  4. Ne nécessite pas de cadre


ebdiv doit être défini sur style="display:none;" . Cela fonctionne à la fois afficher et masquer:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

Comment fonctionnent la visibilité des éléments et jQuery ;

Un élément peut être masqué avec display:none , visibility:hidden ou opacity:0 . La différence entre ces méthodes:

  • display:none masque l'élément et ne prend pas de place;
  • visibility:hidden masque l'élément, mais il prend toujours de la place dans la présentation;
  • opacity:0 masque l'élément en tant que "visibilité: masqué" et occupe toujours de l'espace dans la présentation; la seule différence est que l'opacité permet de rendre un élément partiellement transparent;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    Méthodes de basculement jQuery utiles:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

J'utiliserais la classe CSS .hide { display: none!important; } .hide { display: none!important; } .

Pour masquer / afficher, j'appelle .addClass("hide")/.removeClass("hide") . Pour vérifier la visibilité, j'utilise .hasClass("hide") .

C'est un moyen simple et clair de vérifier / masquer / afficher les éléments, si vous ne prévoyez pas d'utiliser les .toggle() ou .animate() .


Voici également une expression conditionnelle ternaire permettant de vérifier l'état de l'élément, puis de l'activer:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

Vérifiez simplement la visibilité en recherchant une valeur booléenne, telle que:

if (this.hidden === false) {
    // Your code
}

J'ai utilisé ce code pour chaque fonction. Sinon, vous pouvez utiliser is(':visible') pour vérifier la visibilité d'un élément.


Une fonction peut être créée afin de vérifier la visibilité / les attributs d'affichage afin de déterminer si l'élément est affiché dans l'interface utilisateur ou non.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Travail du violon



Peut-être que vous pouvez faire quelque chose comme ça

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>


Cela fonctionne pour moi et j'utilise show() et hide() pour rendre ma div cachée / visible:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Cela peut fonctionner:

expect($("#message_div").css("display")).toBe("none");

Aucune de ces réponses n'aborde ce que je comprends être la question, c'est-à-dire ce que je cherchais: "Comment gérer les éléments qui ont une visibility: hidden ?" . Ni :visible ni :hidden ne gèreront cela, car ils recherchent tous les deux l'affichage selon la documentation. Autant que je sache, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment j'ai résolu le problème (sélecteurs jQuery standard, il peut y avoir une syntaxe plus condensée):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

Une autre réponse à prendre en considération est que si vous cachez un élément, vous devez utiliser jQuery , mais au lieu de le cacher, vous supprimez l’élément entier, mais vous copiez son contenu HTML et la balise elle-même dans une variable jQuery, puis tout ce que vous avez à faire est de vérifier si une telle balise apparaît à l'écran, en utilisant la normale if (!$('#thetagname').length) .


Voici le code pour coché et décoché avec un bouton:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Mise à jour: voici le même bloc de code utilisant la méthode plus récente de Jquery 1.6+, qui remplace attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});




javascript jquery dom visibility