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




savoir si un element est visible javascript (20)

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 d' Display de "néant" fonctionnera plus rapidement que de le modifier directement. J'ai expliqué en détail certaines de ces difficultés dans la question Débordement de pile Tournant deux éléments visibles / cachés dans le même div .

Meilleures pratiques et optimisation JavaScript

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

https://code.i-harness.com

Il est possible de basculer la visibilité d'un élément à l'aide des fonctions .hide() , .show() ou .toggle() .

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


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

Tests (pas de support du filter:alpha 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:none / visibility:hidden dans 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 tous les ancêtres, 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 un 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

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

Cela peut fonctionner:

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

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 bloqué par adblocker. En vérifiant si elle est visible, vous êtes en mesure de détecter si adblocker est activé.


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

Pour masquer / afficher, 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 .toggle() ou .animate() .


Le sélecteur :visible selon la documentation jQuery :

  • Ils ont une valeur d' display 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 étant masqué, 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 cela fait .css("display") == 'none' est non seulement plus rapide, mais retournera é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 :

Parce que :visible est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant :visible ne peuvent tirer parti de l'amélioration des performances fournie par la méthode native querySelectorAll() DOM. 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 pur sélecteur CSS, puis utilisez .filter(":visible") .

De plus, si vous êtes préoccupé par les performances, vous devriez vérifier Maintenant, vous voyez-moi… afficher / masquer les performances (2010-05-04) Et utilisez d'autres méthodes pour afficher et masquer des é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 est comme suit.

$(element).is(":visible")

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>


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

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

Vous pouvez également utiliser sam, en enregistrant le sélecteur jQuery dans une variable pour améliorer les 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 aller de l'avant et faire autre chose avec cela. Le chaînage jQuery facilite les choses.

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 utiliser le filter(":visible") ou le filter(":hidden") suivi de l'enchaînement avec l'action souhaitée. prendre.

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

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 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 avez à faire est de vérifier si une telle balise apparaît à l'écran, en utilisant la normale if (!$('#thetagname').length) .


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.


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

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


Vous pouvez utiliser le sélecteur hidden :

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

Et le sélecteur visible :

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

$('#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

jsFiddle:

JSFiddle - ipsjolly - k4WWj


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





visibility