Comment récupérer avec précision la propriété \'display\' des éléments DOM ?

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

Vous avez rencontré une divergence lors de la récupération de la propriété 'display' des éléments HTML. Même si vous pourriez vous attendre à obtenir « aucun » ou « bloquer » au départ, ce n'est pas le cas. Examinons la raison sous-jacente.

Dans votre exemple de code, vous accédez à la propriété 'style' des styles des éléments. Cependant, ces propriétés correspondent aux styles en ligne définis dans l'attribut 'style', et non aux styles calculés appliqués aux éléments. Pour accéder aux styles réellement appliqués, vous devez plutôt utiliser la méthode « getComputedStyle ».

<code class="javascript">var a = document.getElementById('a');
var p = document.getElementById('p');

const aStyle = getComputedStyle(a);
const pStyle = getComputedStyle(p);

alert(aStyle.display);
alert(pStyle.display);</code>

Cet extrait affichera avec précision les propriétés « d'affichage » réelles calculées des éléments, qui devraient être « aucune » pour le 'a' et 'block' pour l'élément 'p'.

Il est important de faire la distinction entre les styles définis dans l'attribut 'style' et ceux appliqués par le navigateur. Le premier a priorité sur le second, mais 'getComputedStyle' renvoie les valeurs des propriétés qui sont réellement appliquées aux éléments DOM.

Vous pouvez également envisager d'utiliser des classes CSS pour gérer la propriété d'affichage des éléments. Cette approche sépare la présentation de la logique, offrant plus de contrôle et de flexibilité.

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!