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

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.

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>

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

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

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>

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

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.

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

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');

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

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

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')
}

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

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é.

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

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   */
}

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

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();
    });    
});

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

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.

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')

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 .

Cela peut fonctionner:

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

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.

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