Comment récupérer avec précision la propriété d'affichage d'un élément DOM en JavaScript ?

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

Le document décrit une structure HTML contenant deux éléments avec des propriétés d'affichage variables et un script JavaScript interagissant avec eux. Le script tente de récupérer la propriété d'affichage de chaque élément, mais rencontre des résultats inattendus. Lors de l'affichage des valeurs à l'aide des propriétés .style.* de JavaScript, il observe les chaînes vides au lieu des valeurs attendues « aucun » et « bloc ». Cela conduit à une requête sur la méthode correcte pour récupérer la propriété d'affichage avec précision.

L'essentiel réside dans la compréhension de la différence entre l'attribut de style et le style appliqué. Les propriétés .style.* en JavaScript correspondent directement à l'attribut style, qui est une propriété dynamique présente dans les styles en ligne d'un élément HTML. Cependant, le style affiché ou le style appliqué est souvent influencé par des facteurs tels que les règles CSS, l'héritage et les préférences de l'utilisateur. Pour récupérer le style appliqué, il faut utiliser la méthode getComputedStyle().

Par exemple, si l'on appliquait la règle CSS suivante :

<code class="css">a {
    display: inline;
}</code>

La propriété .style.display pour un élément d'ancrage renverrait toujours "aucun" (la valeur en ligne), même si l'élément apparaît en ligne en raison de la règle CSS. En effet, les propriétés .style.* ne reflètent que les attributs de style en ligne, pas le style appliqué.

Pour récupérer le style appliqué, il faut utiliser la méthode getComputedStyle(), car elle donne accès à tous les styles calculés et styles en cascade, y compris ceux définis par les préférences de l'utilisateur et le moteur de style du navigateur. Voici un exemple :

<code class="javascript">var a = (document.getElementById('a'));
var display = window.getComputedStyle(a).display;
alert(display); // Will output "inline"</code>

En tant que bonne pratique, il est conseillé de séparer la présentation de la logique en basculant .className plutôt que de modifier directement les propriétés de style. Cette approche favorise la modularité, la maintenabilité et la réutilisabilité du code.

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!