Comment puis-je déterminer avec précision la visibilité des éléments dans le DOM à l'aide de JavaScript pur ?

Détection de visibilité dans le DOM

Lorsque vous travaillez avec des éléments dans le modèle objet de document (DOM), il est souvent nécessaire de déterminer si un élément est visible. En JavaScript pur, sans utiliser de bibliothèques comme jQuery, la vérification de la visibilité nécessite un examen plus approfondi d'attributs HTML spécifiques.

Pour déterminer la visibilité d'un élément, considérez les attributs suivants :

• display : Cet attribut spécifie le comportement d'affichage d'un élément. S'il est défini sur « aucun », l'élément est masqué.
• visibilité : cet attribut contrôle la visibilité d'un élément, lui permettant d'être masqué ou visible.

Dans le problème soulevé, l'utilisateur a tenté d'utiliser window.getComputedStyle(my_element)['display']) pour vérifier la visibilité, mais ce n'est pas le cas. précis.

Cependant, une approche alternative est disponible pour vérifier la visibilité des éléments à l'aide de sa propriété offsetParent. Si un élément ou l'un de ses parents a la propriété display définie sur "aucun", son offsetParent sera nul. Ceci peut être utilisé pour déterminer si un élément est visible ou non.

Pour les éléments sans positionnement fixe, la fonction suivante peut être utilisée :

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

Pour les éléments avec positionnement fixe, un plus Une approche précise consiste à utiliser window.getComputedStyle(), qui prend en compte davantage de cas extrêmes.

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

Cette méthode est plus complète mais plus lente que la précédente. Si la vitesse est un problème, il est préférable d'utiliser la propriété offsetParent lorsque cela est possible.

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!