Est-il possible de basculer la visibilité d'un élément, en utilisant les fonctions .hide(), .show() ou .toggle()?

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

7646
Philip Morton 7 oct. 2008 à 17:03

26 réponses

Meilleure réponse

Étant donné que 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 à suggestion de twernt, mais appliqué à un seul élément; et il correspond à l'algorithme recommandé dans la FAQ jQuery

Nous utilisons jQuery is () pour vérifier l'élément sélectionné avec un autre élément, sélecteur ou tout autre objet jQuery. Cette méthode parcourt les éléments DOM pour trouver une correspondance qui satisfait le paramètre passé. Il retournera vrai s'il y a une correspondance sinon retourne faux.

9316
Ravi Makwana 11 oct. 2019 à 04:19

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 masquer, vous supprimez tout l'élément, mais vous copiez son HTML et la balise lui-même dans une variable jQuery, puis tout ce que vous devez faire est de tester s'il y a une telle balise à l'écran, en utilisant le if (!$('#thetagname').length) normal.

119
Lucas 26 mars 2013 à 22:12

Vous pouvez peut-être 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>
41
Abrar Jahin 2 mai 2016 à 12:59

Lien de démonstration

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Source:

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

138
Adder 27 août 2019 à 07:08

Voici également une expression conditionnelle ternaire pour vérifier l'état de l'élément, puis pour le basculer:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
30
cssimsek 5 nov. 2013 à 23:32

Exemple:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>
75
dippas 16 juil. 2017 à 13:52

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

Pour cacher / montrer, 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 méthodes .toggle() ou .animate().

161
Lucas 19 mars 2014 à 08:15

Vous devez vérifier les deux ... Affichage et 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 automatiquement les deux choses.

51
Peter Mortensen 19 juil. 2014 à 15:23

Parce que Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (comme décrit pour jQuery: sélecteur visible) - nous pouvons vérifier si l'élément est vraiment visible de cette façon:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});
34
Andron 20 mars 2014 à 10:32

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 de sélecteur. Par exemple:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
387
Chris 12 janv. 2016 à 14:08

Aucune de ces réponses ne répond à ce que je comprends être la question, c'est-à-dire ce que je cherchais, "Comment gérer les éléments contenant visibility: hidden?" . Ni :visible ni :hidden ne s'en occuperont, car ils recherchent tous les deux un affichage selon la documentation. Pour autant que je puisse déterminer, il n'y a pas de sélecteur pour gérer la visibilité CSS. Voici comment je l'ai résolu (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
    }
});
522
Andrii Abramov 26 juin 2017 à 07:12

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

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

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

Donc, cela a 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 définies explicitement sur 0, elles peuvent être définies implicitement .

Jetez un œil à 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 DE 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 cases 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
98
Al Foиce ѫ 6 août 2016 à 08:53

Pour vérifier s'il n'est pas visible, j'utilise !:

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

Ou ce qui suit est également le sam, enregistrant le sélecteur jQuery dans une variable pour avoir de meilleures performances lorsque vous en avez besoin plusieurs fois:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
67
Peter Mortensen 14 sept. 2013 à 08:01

Souvent, lorsque vous vérifiez si quelque chose est visible ou non, vous allez immédiatement de l'avant et faites autre chose avec. Le chaînage jQuery rend cela facile.

Donc, si vous avez un sélecteur et que vous souhaitez effectuer une action dessus uniquement s'il est visible ou masqué, vous pouvez utiliser filter(":visible") ou filter(":hidden") suivi de l'enchaîner avec l'action que vous souhaitez effectuer.

Donc, au lieu d'une instruction 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" });
290
ecarrizo 27 avril 2015 à 20:10

Exemple d'utilisation du contrôle visible pour adblocker activé:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" est un identifiant qui bloque adblocker. Donc, en vérifiant s'il est visible, vous pouvez détecter si adblocker est activé.

60
Cameron 13 sept. 2016 à 14:07

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

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

Violon de travail

30
Peter Mortensen 22 nov. 2014 à 11:23

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   */
}
211
webvitaly 14 déc. 2015 à 21:32

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 en ligne

  4. Ne nécessite pas de cadre

160
Lucas 19 mars 2014 à 08:15

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

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
131
Community 26 oct. 2018 à 07:33
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
dcodesmith 7 déc. 2013 à 13:51

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

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.

37
dippas 16 juil. 2017 à 13:56

Vous pouvez utiliser le sélecteur hidden:

// Matches all elements that are hidden
$('element:hidden')

Et le visible sélecteur:

// Matches all elements that are visible
$('element:visible')
1444
twernt 8 mars 2018 à 15:38

Mais que se passe-t-il si le CSS de l'élément est le suivant?

.element{
    position: absolute;left:-9999;    
}

Donc, cette réponse à la question Stack Overflow Comment vérifier si un élément est hors écran doit également être considérée .

32
Community 23 mai 2017 à 11:55

Cela peut fonctionner:

expect($("#message_div").css("display")).toBe("none");
89
Lucas 6 mars 2013 à 06:41

Le :visible sélecteur selon la documentation jQuery:

  • Ils ont une valeur CSS display de none.
  • Ce sont des éléments de formulaire avec type="hidden".
  • Leur largeur et leur hauteur sont explicitement définies sur 0.
  • Un élément ancêtre est masqué, donc l'élément n'est pas affiché sur la page.

Les éléments avec visibility: hidden ou opacity: 0 sont considérés comme visibles, car ils consomment toujours de l'espace dans la mise en page.

Ceci est utile dans certains cas et inutile dans d'autres, car si vous voulez vérifier si l'élément est visible (display != none), en ignorant la visibilité des parents, vous constaterez que faire .css("display") == 'none' n'est pas seulement plus rapide, mais renverra également le contrôle de visibilité correctement.

Si vous souhaitez vérifier la visibilité au lieu de l'affichage, vous devez utiliser: .css("visibility") == "hidden".

Prenez également en compte les notes jQuery supplémentaires:

Étant donné que :visible est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant :visible ne peuvent pas tirer parti de l'amélioration des performances fournie par la méthode native DOM querySelectorAll(). Pour obtenir les meilleures performances lors de l'utilisation de :visible pour sélectionner des éléments, sélectionnez d'abord les éléments à l'aide d'un sélecteur CSS pur, puis utilisez .filter(":visible").

De plus, si vous êtes préoccupé par les performances, vous devriez vérifier Maintenant, vous me voyez… afficher / masquer les performances (2010-05-04). Et utilisez d'autres méthodes pour afficher et masquer les éléments.

240
Pang 21 juin 2017 à 01:41

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

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

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

$(element).is(":visible")
134
Peter Mortensen 16 mars 2013 à 10:04