Récupération de la propriété d'affichage d'un élément DOM : dévoiler la vraie valeur

Le code HTML fourni introduit un paragraphe et une ancre avec un affichage différent styles. Cependant, la récupération de ces styles via la propriété style semble entraîner des chaînes vides inattendues. Pourquoi est-ce le cas et comment pouvez-vous récupérer avec précision la propriété d'affichage ?

L'énigme de la chaîne vide

La confusion initiale surgit parce que le .style.* les propriétés sont directement mappées à l'attribut de style, et non au style appliqué. Cela signifie que vous vérifiez essentiellement la déclaration de style en ligne, qui peut ne pas toujours refléter le style calculé.

La solution : getComputedStyle

Pour obtenir le style réellement appliqué , y compris les propriétés héritées, vous devez utiliser la méthode getComputedStyle. Cette méthode prend un élément DOM comme argument et renvoie un objet CSSStyleDeclaration contenant les valeurs de style calculées.

Le code fourni peut être modifié pour utiliser getComputedStyle comme suit :

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);
var p = (document.getElementById('p'));
alert(getComputedStyle(p).display);
p.style.display = 'none';
alert(getComputedStyle(p).display);

Maintenant, la première alerte affichera "aucun" pour la balise d'ancrage, la deuxième alerte affichera "bloc" pour l'élément de paragraphe et la troisième alerte affichera "aucun" après le réglage intentionnel de l'affichage. Cela reflète avec précision les styles d'affichage calculés des éléments.

Approche alternative : basculement de classe

Au lieu de vous fier à la propriété d'affichage, vous pouvez envisager d'utiliser des noms de classe pour basculer. la visibilité des éléments. En séparant la présentation de la logique, vous pouvez simplifier votre code et le rendre moins sujet aux problèmes liés au style.