Comment vérifier si un élément est masqué dans jQuery?

7748

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 visibleou hidden?

Philip Morton
la source
49
Il convient de mentionner (même après tout ce temps), qui $(element).is(":visible")fonctionne pour jQuery 1.4.4, mais pas pour jQuery 1.3.2, sous Internet & nbsp; Explorer & nbsp; 8 . Cela peut être testé à l'aide de l'extrait de test utile de Tsvetomir Tsonev . N'oubliez pas de changer la version de jQuery, pour tester sous chacun.
Ruben
2
Ceci est lié bien qu'une question différente: stackoverflow.com/questions/17425543/…
Mark Schultheiss

Réponses:

9403

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

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

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

C'est la même chose que la suggestion de twernt , mais appliquée à un seul élément; et il correspond à l'algorithme recommandé dans la FAQ jQuery .

Nous utilisons is () de jQuery 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 retournera faux.

Tsvetomir Tsonev
la source
165
Cette solution semble encourager la confiance de visible=falseet display:none; considérant que la solution de Mote illustre clairement les codeurs qui ont l'intention de vérifier le display:none; (via mention de cache-cache qui display:nonene contrôle pas visible=true)
kralco626
94
C'est correct, mais :visiblevérifiera également si les éléments parents sont visibles, comme l'a souligné chiborg.
Tsvetomir Tsonev
46
Vous avez un point - je vais préciser que le code vérifie uniquement la displaypropriété. Étant donné que la question d'origine est pour show()et hide(), et ils ont réglé display, ma réponse est correcte. Au fait, cela fonctionne avec IE7, voici un extrait de test - jsfiddle.net/MWZss ;
Tsvetomir Tsonev le
54
En fait, j'ai trouvé que les mots à logique inverse étaient meilleurs:! $ ('Sélecteur'). Is (': caché'); pour certaines raisons. Ça vaut le coup d'essayer.
Kzqai
22
Voici un test de référence simple est () contre regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Conclusion: si vous êtes à la recherche de performances, utilisez l'expression rationnelle sur is () (puisque is () recherche d'abord tous les nœuds cachés avant de regarder l'élément réel).
Max Leske
1461

Vous pouvez utiliser le hiddensélecteur:

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

Et le visiblesélecteur:

// Matches all elements that are visible
$('element:visible')
twernt
la source
68
faites
codecraig
28
Aux pages 21 à 28, il montre à quel point lent: caché ou: visible est comparé à d'autres sélecteurs. Merci de l'avoir signalé.
Etienne Dupuis
110
Lorsque vous avez affaire à quelques éléments et que très peu de choses se passent - c'est-à-dire LA MAJORITÉ ABSOLUMENT VASTE DES CAS - la question du temps est une préoccupation ridiculement mineure. Oh non! Il a fallu 42 ms au lieu de 19 ms !!!
vbullinger
17
Je bascule l'élément à l'aide de ce sélecteur. $ ('element: hidden') est toujours vrai pour moi!
ZoomIn
16
@cwingrav Vous voudrez peut-être relire la documentation,: masqué s'applique à tous les éléments. Les éléments de formulaire avec ne type="hidden"sont qu'un seul cas qui peut déclencher: caché. Les éléments sans hauteur ni largeur, les éléments avec display: noneet les éléments avec ancêtres cachés seront également qualifiés de: cachés.
Joshua Walsh
952
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 div2visible tandis que :visiblenon. Mais ce qui précède peut être utile dans de nombreux cas, en particulier lorsque vous devez rechercher s'il y a des divs d'erreur visibles dans le parent masqué, car dans de telles conditions, :visiblecela ne fonctionnera pas.

Grain
la source
132
Cela vérifie uniquement la propriété d'affichage d'un seul élément. L'attribut: visible vérifie également la visibilité des éléments parents.
chiborg
17
C'est la seule solution qui a fonctionné pour moi lors des tests avec IE 8.
evanmcd
21
@chiborg Oui, mais parfois c'est ce que vous voulez et j'ai dû apprendre à la dure comment jQuery était "intelligent" ...
Casey
9
Cela ne répond à la question, étant la question est sur un seul élément et en utilisant les hide(), show()et les toggle()fonctions, cependant, comme la plupart ont déjà dit, nous devrions utiliser les :visibleet :hiddenpseudo-classes.
Jimmy Knoot
2
Cette réponse peut être utilisée lorsqu'un élément existe mais n'est pas actuellement sur la page, comme après detach ().
atheaos
527

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 qui en ont visibility: hidden?" . Ni :visiblene :hiddentraitera cela, car ils sont tous deux à la recherche d'affichage par 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
    }
});
aaronLile
la source
18
Cette réponse est bonne à gérer visibilitylittéralement, mais la question était How you would test if an element has been hidden or shown using jQuery?. Utiliser jQuery signifie: la displaypropriété.
MarioDS
10
Les éléments avec visibility: hiddenou opacity: 0sont considérés comme visibles, car ils consomment toujours de l'espace dans la mise en page. Voir la réponse de Pedro Rainho et la documentation jQuery sur le :visiblesélecteur.
admiration
9
vous devez parcourir le DOM pour vérifier les parents du nœud, sinon cela est inutile.
vsync
391

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 à l'aide des sélecteurs :visibleet :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 :visibleou :hiddendans l'expression de sélecteur. Par exemple:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
user574889
la source
4
se demandant pourquoi aucune réponse ne mentionne le cas lorsque l'élément est éloigné de la fenêtre visible, comme top:-1000px...
Je
295

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 sur celui-ci uniquement s'il est visible ou masqué, vous pouvez l'utiliser filter(":visible")ou le filter(":hidden")suivre en le chaînant avec l'action que vous souhaitez effectuer.

Donc, au lieu d'une ifdéclaration, 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" });
Simon_Weaver
la source
25
Aucune raison d'extraire le nœud DOM dans l'extrait de code utilisé dans l'exemple, puis de le rechercher à nouveau. Mieux vaut juste faire: var $ button = $ ('# btnUpdate'); Et puis dans les expressions If, utilisez simplement $ button au lieu de $ (button). A l'avantage de mettre en cache l'objet jQuery.
LocalPCGuy
1
voici un exemple simple jquerypot.com/…
Ketan Savaliya
242

Le :visiblesélecteur selon la documentation jQuery :

  • Ils ont une displayvaleur CSS de none.
  • Ce sont des éléments de forme 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: hiddenou opacity: 0sont 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'est non seulement plus rapide, mais retournera également correctement le contrôle de visibilité.

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

Tenez également compte des notes jQuery supplémentaires :

Étant donné qu'il :visibles'agit d'une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant :visiblene peuvent pas tirer parti de l'amélioration des performances fournie par la querySelectorAll()méthode DOM native . Pour obtenir les meilleures performances lors de l'utilisation :visiblepour 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 cocher Maintenant vous me voyez… afficher / masquer les performances (2010-05-04). Et utilisez d'autres méthodes pour afficher et masquer les éléments.

Pedro Rainho
la source
214

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   */
}
Abiy
la source
213

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

Un élément pourrait être caché avec display:none, visibility:hiddenou opacity:0. La différence entre ces méthodes:

  • display:none cache l'élément, et il ne prend pas de place;
  • visibility:hidden masque l'élément, mais il prend toujours de la place dans la mise en page;
  • opacity:0cache l'élément comme "visibilité: caché", et il prend toujours de la place dans la mise en page; 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();
    });
webvitaly
la source
20
Une autre différence entre visibility:hiddenet opacity:0est que l'élément répondra toujours aux événements (comme les clics) avec opacity:0. J'ai appris cette astuce en créant un bouton personnalisé pour les téléchargements de fichiers.
urraka
1
aussi si vous masquez l'entrée avec l'opacité: 0, elle est toujours sélectionnée avec la touche de tabulation
YangombiUmpakati
161

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

Matt Brock
la source
6
Fonctionne légèrement différemment de jQuery; il considère visibility: hiddenêtre visible .
alex
4
Il est assez facile de modifier le code ci-dessus pour imiter le comportement (sans doute stupide) de jQuery. . . . . function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} return false;}
Matt Brock
3
Bien sûr, j'ajoutais juste cela pour le bénéfice des utilisateurs qui l'ont utilisé sans scanner son code. :)
alex
160

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 .toggle()ou de .animate()méthodes.

Evgeny Levin
la source
11
.hasClass('hide')ne vérifie pas si un ancêtre du parent est masqué (ce qui le rendrait également masqué). Vous pourriez éventuellement faire fonctionner cela correctement en vérifiant si .closest('.hide').length > 0, mais pourquoi réinventer la roue?
nbrooks
1
La variante que vous proposez renvoie si l'élément est visible en html, ma variante renvoie si l'élément a été directement masqué par votre code javascript / moteur de vue. Si vous savez que les éléments parents ne doivent jamais être cachés, utilisez .hasClass () pour être plus strict et éviter de futurs bugs. Si vous voulez vérifier non seulement la visibilité mais aussi l'état des éléments, utilisez également .hasClass (). Dans d'autres cas, .closest () est préférable.
Evgeny Levin
1
Pourquoi n'utilisez-vous pas simplement .is (": visible")?
dont_trust_me
138

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"/>

La source:

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

Code Spy
la source
1
@Adrew mais ce lien montre un exemple de travail de cette fonction. Je pense qu'une réponse pratique peut peser sur une pleine page de texte :)
Code Spy
133

On peut simplement utiliser l' attribut hiddenor visible, comme:

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

Ou vous pouvez simplifier la même chose avec est -ce qui suit.

$(element).is(":visible")
Scorpion
la source
130

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

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

Une autre réponse que vous devriez 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 devez faire est de tester s'il y a une telle balise à l'écran, en utilisant la normale if (!$('#thetagname').length).

Lucas
la source
100

Lors du test d'un élément par rapport à :hiddenselector dans jQuery, il convient de considérer qu'un élément positionné 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 sur 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 la largeur et la 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 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 boîtes de mise en page, y compris celles de largeur et / ou de hauteur zéro.

JSFiddle avec jQuery 3.0.0-alpha1:

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

Le même code JavaScript aura alors cette sortie:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
conceptdeluxe
la source
90

Cela peut fonctionner:

expect($("#message_div").css("display")).toBe("none");
Maneesh Kumar
la source
7
De quelle langue / dialecte / bibliothèque s'agit-il? Je ne connais pas cette syntaxe dans JS ...
nbrooks
74

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>

Irfan DANOIS
la source
66

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')
}
Matthias Wegtun
la source
1
Comment avez-vous déterminé que l'enregistrement d'un sélecteur dans une variable est vraiment plus rapide?
Ilia Rostovtsev
3
Salut @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Là, vous pouvez exécuter le test. Quoi qu'il en soit, il est agréable de l'avoir en cache afin qu'il soit accessible plus rapidement
Matthias Wegtun
2
Cela convient si vous souhaitez utiliser une seule variable tout au long du processus au lieu d'appeler et d'appeler le même objet.
Kenneth Palaganas
60

Utilisez le basculement de classe, pas l'édition de style. . .

L'utilisation de classes désignées pour «masquer» des éléments est facile et également l'une des méthodes les plus efficaces. Basculer une classe «cachée» avec un Displaystyle «aucun» sera plus rapide que de modifier directement ce style. J'ai expliqué une partie de cela assez en détail dans la question Stack Overflow Transformer deux éléments visibles / cachés dans la même div .


Meilleures pratiques et optimisation JavaScript

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

De guingois
la source
60

Exemple d'utilisation de la vérification 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é.

Roman Losev
la source
58

Après tout, aucun exemple ne me convient, j'ai donc écrit le mien.

Tests (pas de support d'Internet Explorer filter:alpha):

a) Vérifiez si le document n'est pas masqué

b) Vérifiez si un élément n'a pas de largeur / hauteur / opacité ou display:none/ visibility:hiddendans des styles en ligne

c) Vérifiez si le centre (également parce qu'il est plus rapide que de tester chaque pixel / coin) de l'élément n'est pas masqué par un autre élément (et par tous les ancêtres, par exemple: overflow:hidden/ scroll / un élément sur un autre) ou les bords de l'écran

d) Vérifier si un élément a une largeur / hauteur / opacité ou display:none/ visibilité nulle : caché dans les styles calculés (parmi tous les ancêtres)

Testé sur

Android 4.4 (navigateur natif / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modes de document Internet Explorer 5-11 + Internet Explorer 8 sur un machine virtuelle) et Safari (Windows / Mac / iOS).

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Comment utiliser:

is_visible(elem) // boolean
Aleko
la source
50

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.

Premshankar Tiwari
la source
41

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>

Mathias Stavrou
la source
37

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.

pixellabme
la source
34

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;
    }
});
Andron
la source
30

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

V31
la source
29

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'); });
cssimsek
la source
4
Ou, y'kno, débarrassez-vous de tout le conditionnel et dites $('elementToToggle').toggle('slow');...:)
nbrooks
29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Gaurav
la source