Comment puis-je accéder avec précision à la propriété « display » des éléments DOM ?

Accéder avec précision à la propriété d'affichage des éléments DOM

Récupérer la propriété d'affichage des éléments DOM peut sembler simple, mais des résultats inattendus peuvent survenir. Prenons l'exemple suivant :

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

Cette alerte peut afficher une chaîne vide au lieu de la valeur « aucun » attendue. Pourquoi cela se produit-il ?

Le problème réside dans la différence entre la valeur de l'attribut CSS et le style appliqué.

Valeur de l'attribut CSS par rapport au style appliqué

Les propriétés .style.*, y compris .display, correspondent à la valeur de l'attribut CSS, et non au style appliqué. Le style appliqué reflète le résultat de la cascade CSS et peut différer de la valeur de l'attribut.

Dans l'exemple donné, la propriété d'affichage de l'élément « a » est définie sur « aucun » dans le style de l'attribut CSS :

a {
  display: none;
}

Cependant, le style appliqué peut être différent en raison de feuilles de style externes ou de modifications dynamiques.

Utilisation getComputedStyle

Pour récupérer correctement le style appliqué, utilisez la méthode getComputedStyle(). Il prend un élément comme argument et renvoie un objet CSSStyleDeclaration contenant les styles CSS calculés.

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);  // Displays "none" as expected

Approche alternative : bascules de classe

Comme alternative, envisagez d'utiliser Classes CSS pour basculer la visibilité des éléments. Cette approche sépare la présentation de la logique et évite d'avoir à manipuler directement les attributs CSS.

.hidden {
  display: none;
}

var p = document.getElementById('p');
p.classList.toggle('hidden'); // Toggles the display property

En utilisant getComputedStyle ou les bascules de classe, vous pouvez accéder et contrôler avec précision la propriété d'affichage des éléments DOM.

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!