Comment récupérer les valeurs de style appliquées d'un élément DOM

Récupération de la propriété Display d'un élément DOM

Dans une page Web, la propriété display détermine la visibilité et la disposition d'un élément. Les propriétés .style.* donnent accès aux attributs de style définis dans le code HTML, tandis que la méthode getComputedStyle() révèle les valeurs de style appliquées.

Comprendre les propriétés .style.*

Les propriétés .style.*, telles que .style.display, renvoient la valeur de l'attribut de style correspondant attribué à un élément. Toutefois, ces propriétés ne reflètent pas les styles appliqués par le navigateur. Par exemple, dans l'extrait de code suivant :

<code class="html"><style type="text/css">
  a { display: none; }
</style>

<script type="text/javascript">
  var a = (document.getElementById('a')).style;
  alert(a.display); // Displays an empty string
</script></code>

La propriété .style.display de l'élément "a" renvoie une chaîne vide car aucun attribut d'affichage n'est défini dans le code HTML. Ceci est trompeur puisque l'élément est visuellement défini pour afficher : aucun dans la feuille de style CSS.

Utilisation de getComputedStyle() pour les valeurs de style appliquées

Pour récupérer le style appliqué valeurs, utilisez la méthode getComputedStyle(). Par exemple :

<code class="javascript">var a = document.getElementById('a');
var computedStyle = window.getComputedStyle(a);
alert(computedStyle.display); // Displays "none"</code>

Dans ce scénario, getComputedStyle() renvoie la valeur CSS réelle appliquée à l'élément "a".

Conclusion

Lorsque vous traitez des propriétés de style, soyez conscient de la distinction entre les attributs de style (accessibles via .style.) et les valeurs de style appliquées (accessibles via getComputedStyle()). Les propriétés .style. reflètent uniquement les attributs de style définis dans le HTML, qui peuvent ne pas représenter avec précision l'apparence visuelle de l'élément. Pour cela, utilisez toujours getComputedStyle() pour obtenir les valeurs de style appliquées.

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!