Pourquoi « element.style.display » est-il vide même lorsque j'ai des règles CSS ?

Pourquoi les propriétés de style CSS restent vides avec getElementById().style

Lorsque vous utilisez getElementById() pour récupérer un élément HTML, accéder à son La propriété style via element.style.display renvoie souvent une valeur vide, malgré la présence d'une règle de style CSS comme #map {display: block}.

Ce comportement se produit car element.style ne reflète que explicitement les styles en ligne. défini sur l'élément dans le document HTML. Si aucun style en ligne n'est défini, element.style sera vide.

Pour accéder au style calculé réel d'un élément, qui intègre à la fois les styles en ligne et les règles CSS, utilisez la méthode window.getComputedStyle(). Cette méthode fournit un objet Style représentant le style complet appliqué à l'élément.

Par exemple, invoquer console.log(window.getComputedStyle(document.getElementById('test')).display) affichera "block, " reflétant la règle #map {display: block}.

Bien que le style en ligne soit généralement déconseillé en faveur du CSS, comprendre la distinction entre element.style et window.getComputedStyle() est crucial pour accéder avec précision aux styles d'éléments dans JavaScript.

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!