Comment puis-je déterminer la visibilité des éléments dans le DOM en utilisant uniquement JavaScript ?

Détermination de la visibilité des éléments dans le DOM à l'aide de JavaScript pur

Question :

Pouvons-nous déterminer si un élément est visible dans le DOM sans s'appuyer sur jQuery ? Plus précisément, quels attributs devons-nous vérifier pour garantir sa visibilité ?

Réponse :

Selon la documentation MDN, la propriété offsetParent d'un élément renvoie null si lui-même ou l'un de ses ancêtres sont masqués via la propriété de style d'affichage. Cependant, cela suppose que l'élément ne soit pas positionné de manière fixe. Si aucun élément position:fixed n'est présent sur la page, un script concis pour vérifier la visibilité pourrait être :

function isHidden(el) {
    return (el.offsetParent === null);
}

S'il y a des éléments position:fixed sur la page, cependant, nous devons malheureusement recourir à window .getComputedStyle() pour une vérification approfondie, qui peut avoir des implications sur les performances :

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

Malgré sa sensibilité aux cas extrêmes, la deuxième option offre une plus grande clarté. Si l'opération doit être effectuée à plusieurs reprises, envisagez la première option pour plus d'efficacité, en évitant les pénalités de performances de window.getComputedStyle().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!