it-swarm-eu.dev

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

Il est possible de changer la visibilité d'un élément en utilisant les fonctions .hide(), .show() ou .toggle().

Comment vérifierais-tu si un élément est visible ou caché?

7074
Philip Morton

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 jQuery FAQ

8738
Tsvetomir Tsonev

Vous pouvez utiliser le sélecteur hidden :

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

Et le visible selector:

// Matches all elements that are visible
$('element:visible')
1339
twernt
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 ne le sera pas. 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.

850
Mote

Aucune de ces réponses ne répond à ce que je comprends être la question, qui est ce que je cherchais, "Comment gérer les éléments qui ont 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 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
    }
});
479
aaronLile

De Comment 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');
349
user574889

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.

Ainsi, 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 filter(":visible") ou filter(":hidden") suivi de l'enchaînement avec l'action à effectuer.

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" });
259
Simon_Weaver

Le sélecteur :visible en fonction de la documentation de 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é, ainsi 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 occupent toujours de l'espace dans la présentation.

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 également renvoyer correctement le contrôle de visibilité .

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 Vous voyez maintenant… afficher/masquer les performances (2010-05-04). Et utilisez d'autres méthodes pour afficher et masquer des éléments.

211
Pedro Rainho

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

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

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

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 n'occupe aucun espace;
  • 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 la place 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();
    });
    
185
webvitaly

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().

146
Evgeny Levin

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

141
Matt Brock

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")
122
ScoRpion

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

111
Code Spy

Une autre réponse à prendre en compte 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 HTML content et la balise elle-même dans une variable jQuery, et tout ce que vous avez à faire est de vérifier s’il existe une telle balise à l’écran, en utilisant la fonction if (!$('#thetagname').length) normale.

110
think123

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

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

Lors du test d'un élément par rapport au sélecteur :hidden dans jQuery, il convient de considérer que 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 la largeur et la hauteur ne sont pas définies par explicitement sur 0, elles peuvent l'être par implicitement.

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>


UPDATE FOR 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
85
conceptdeluxe

Cela peut fonctionner:

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

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>

63
Irfan DANISH

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

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

Vous pouvez également enregistrer le sélecteur jQuery dans une variable afin d’améliorer les performances lorsque vous en avez besoin plusieurs fois:

var $book = $('#book')

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

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 Display de "néant" fonctionnera plus rapidement que la modification directe de ce style. J'ai expliqué une partie de cela en détail dans la question Stack Overflow Tourner deux éléments visibles/cachés dans le même div _.


Meilleures pratiques et optimisation de JavaScript

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

59
Lopsided

Exemple d’utilisation de visible check for adblocker est 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 bloqué par adblocker. En vérifiant si elle est visible, vous pouvez détecter si adblocker est activé.

56
Roman Losev

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

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

a) Vérifier si le document n'est pas caché

b) Vérifier si un élément a zéro largeur/hauteur/opacité ou display:nonevisibility:hidden dans les 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 caché par un autre élément (et 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 zéro largeur/hauteur/opacité ou display:none/visibilité: 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 d'Internet Explorer 5-11 + Internet) Explorer 8 sur une machine virtuelle), 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
55
Aleko

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 automatiquement les deux choses.

50
Premshankar Tiwari

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>

38
Mathias Stavrou

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: visible Selector ) - nous pouvons vérifier si l’élément est vraiment visible de cette manière:

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;
    }
});
32
Andron

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.

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

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

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

So cette réponse à la question de débordement de pile Comment vérifier si un élément est hors écran doit également être prise en compte.

30
RN Kushwaha

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'); });
29
cssimsek

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é ou non dans l'interface utilisateur. 

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

Travailler Fiddle

29
V31
.is(":not(':hidden')") /*if shown*/
25
Kareem

J'ai cherché cela, et aucune des réponses n'est correcte pour mon cas, alors j'ai créé une fonction qui retournera faux si ses yeux ne peuvent pas voir l'élément

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});
19
lmcDevloper
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
18
Prabhagaran

Voici comment jQuery résout ce problème en interne:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Si vous n'utilisez pas jQuery, vous pouvez simplement exploiter ce code et le transformer en votre propre fonction:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Quelle isVisible retournera true tant que l'élément est visible.

15
Oriol

Il suffit simplement de vérifier si cet élément est visible et il retournera un boolean , jQuery masque les éléments en ajoutant aucun affichage à l’élément. Ainsi, si vous voulez utiliser du JavaScript pur, vous pouvez toujours le faire, par exemple:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

En outre, vous pouvez utiliser jQuery comme cela semble être le reste de votre code et vous avez un bloc de code plus petit, comme dans la suite de jQuery, faites la même piste pour vous:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

L'utilisation de la méthode css dans jQuery peut également entraîner la même chose:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

Également en cas de vérification de la visibilité et de l'affichage, vous pouvez procéder comme suit:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}
14
Alireza

Il y a plusieurs façons de vérifier si un élément est visible ou caché dans jQuery.

HTML de démonstration par exemple

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Utiliser le sélecteur de filtre de visibilité $('element:hidden') ou $('element:visible')

  • $('element:hidden'): sélectionne tous les éléments masqués.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): sélectionne tous les éléments visibles.

    Example:
       $('#content:visible').css('color', '#EEE');
    

Pour en savoir plus, consultez http://api.jquery.com/category/selectors/visibility-filter-selectors/

Utiliser is() Filtrage

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

En savoir plus sur http://api.jquery.com/is/

14
Arun Karnawat

En tant que hide(), show() et toggle() attache un css en ligne (display: none ou display: block) à element . De même, nous pouvons facilement utiliser l'opérateur ternaire pour vérifier si l'élément météo est caché ou visible en vérifiant display css.

METTRE À JOUR:

  • Vous devez également vérifier si l'élément css est défini sur visibilité: "visible" ou visibilité: "masqué"
  • L'élément sera également visible si la propriété display est définie sur inline-block, block, flex.

Nous pouvons donc vérifier la propriété de l'élément qui le rend invisible. Donc, ils sont display: none et visibility: "hidden";

Nous pouvons créer un objet pour vérifier la propriété responsable de masquer l'élément:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

Nous pouvons vérifier en parcourant chaque valeur de clé dans la correspondance d’objets si la propriété d’élément pour les correspondances de clé avec la valeur de propriété cachée.

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

Si vous souhaitez vérifier des propriétés telles que la hauteur d'élément: 0 ou la largeur: 0 ou plus, vous pouvez étendre cet objet, y ajouter une propriété et la vérifier.

Merci @Krzysztof Przygoda de me rappeler d’autres propriétés d’affichage.

14
No one

Vous pouvez utiliser ceci:

$(element).is(':visible');

Exemple de code

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>

13
Abrar Jahin

Ceci est une option pour vérifier que la balise est visible ou non

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

11
Sangeet Shah

Je veux juste préciser que, dans jQuery,

Les éléments peuvent être considérés comme cachés pour plusieurs raisons:

  • Ils ont une valeur d'affichage CSS 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é, ainsi l'élément n'est pas affiché sur la page.

Les éléments avec visibilité: caché ou opacité: 0 sont considérés comme visibles, car ils occupent toujours de l'espace dans la présentation. Lors d'animations masquant un élément, celui-ci est considéré comme visible jusqu'à la fin de l'animation.

Source: : sélecteur caché | Documentation de l'API jQuery

if($('.element').is(':hidden')) {
  // Do something
}
10
Sky Yip

Vous pouvez simplement ajouter une classe quand elle est visible. Ajouter une classe, show. Ensuite, vérifiez qu'il a une classe:

$('#elementId').hasClass('show');

Il retourne vrai si vous avez la classe show.

Ajouter des CSS comme ceci:

.show{ display: block; }
9
Sahan

Il y a trop de méthodes pour vérifier les éléments cachés. C'est le meilleur choix (je viens de vous recommander):

Avec jQuery, créez un élément "display: none" en CSS pour hidden.

Le point est:

$('element:visible')

Et un exemple d'utilisation:

$('element:visible').show();
7

Il suffit de vérifier l'attribut display (ou visibility en fonction du type d'invisibilité que vous préférez). Exemple :

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
5
Antoine Auffray

Vous pouvez utiliser le 

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

Documentation API: https://api.jquery.com/visible-selector/

4
Wolfack

1 • solution jQuery

Méthodes permettant de déterminer si un élément est visible dans JQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Boucle sur tous les enfants visibles div de l'élément id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Coup d'oeil à la source de jQuery

Voici comment jQuery implémente cette fonctionnalité:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • Comment vérifier si un élément est hors écran - CSS

En utilisant Element.getBoundingClientRect (), vous pouvez facilement détecter si votre élément se trouve ou non dans les limites de votre fenêtre de visualisation (à savoir à l'écran ou à l'écran):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Vous pouvez ensuite l'utiliser de plusieurs manières:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

Si vous utilisez Angular, vérifiez: N'utilisez pas d'attribut caché avec Angular

3
Lyes CHIOUKH
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

Vous pouvez utiliser la fonction jQuery is() pour vérifier si l'élément sélectionné est visible ou masqué. Cette méthode parcourt les éléments DOM pour trouver une correspondance, qui satisfait le paramètre transmis. Il retournera true s'il y a correspondance, sinon false.

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
1

Au lieu d'écrire une event pour chaque element unique, procédez comme suit:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Aussi, vous pouvez l'utiliser sur les entrées:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
0
user10145552

Essayer

content.style.display != 'none'
function toggle() {
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.log('visible:', visible);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>
0
Kamil Kiełczewski

Tu peux le faire:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}
0
user8903269

solution jQuery, question assez ancienne, mais je suis quand même tombée. Je peux donner une meilleure réponse pour ceux qui veulent changer le texte du bouton.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

0
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825

Pour être juste, la question est antérieure à cette réponse. Je l'ajoute non pas pour critiquer le PO mais pour aider quiconque pose encore cette question.

La manière correcte de déterminer si quelque chose est visible est de consulter votre modèle de vue. Si vous ne savez pas ce que cela signifie, vous êtes sur le point de partir pour un voyage de découverte qui rendra votre travail beaucoup moins difficile.

Voici un aperçu de l’architecture (/ MVVM) model-view-viewmodel .

KnockoutJS est une bibliothèque de liaisons qui vous permettra d’essayer ces choses sans apprendre tout un framework.

Et voici quelques JS et une DIV qui peuvent ou peuvent ne pas être visibles.

<html><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
  IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
  //get current visibility state for the div
  var x = IsDivVisible();
  //set it to the opposite
  IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body></html>

Notez que la fonction bascule ne consulte pas le DOM pour déterminer la visibilité de la div, elle consulte le modèle de vue.

0
Peter Wone