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

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?

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

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

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.

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

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

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

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.

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

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

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

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.

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

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

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

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

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

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

Cela peut fonctionner:

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

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>

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

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:

• Accélérez votre Javascript (YouTube)

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

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

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.

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>

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.

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

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.

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

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

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