Comment puis-je déterminer efficacement la visibilité des éléments en JavaScript ?

Déterminer la visibilité des éléments dans le DOM avec du JavaScript pur

Identifier si un élément est visible dans le DOM est souvent essentiel pour diverses tâches de développement Web . Bien que jQuery propose une solution simple, cet article explore une approche JavaScript pure.

Vérification des attributs des éléments

La question propose de vérifier des attributs tels que l'affichage et la visibilité pour déterminer la visibilité. Cependant, ces attributs à eux seuls peuvent ne pas suffire.

Exploiter le décalage d'élément

Selon la documentation MDN, la propriété offsetParent d'un élément renvoie null si l'élément ou ses ancêtres sont masqué par la propriété display. Cette approche convient s'il n'y a aucun élément avec position : fixe.

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

Style de fenêtre pour les éléments fixes

Si des éléments à position fixe sont présents, il est nécessaire d'utiliser window.getComputedStyle().

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

Performance Considérations

L'option 2 avec window.getComputedStyle() est plus complète mais potentiellement plus lente. Si cette opération est répétée fréquemment, pensez à utiliser l'approche offset pour optimiser les performances.

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!