Pourquoi element.style.display renvoie-t-il une chaîne vide lorsque les styles sont définis en CSS ?

Comprendre le comportement de la propriété element.style en JavaScript

La propriété element.style en JavaScript se comporte différemment lorsque vous définissez des styles en CSS et en les définissant directement via l'attribut style de l'élément.

Lorsque vous attribuez des styles en CSS, element.style renvoie une chaîne vide pour des propriétés telles que l'affichage. En effet, aucun style en ligne n'est appliqué à l'élément et la propriété style en CSS remplace tous les styles en ligne.

Cependant, si vous définissez la propriété style directement via l'élément, element.style renverra le valeur que vous avez définie.

Raison de la propriété d'affichage vide

La raison de la propriété d'affichage vide en CSS est que la propriété d'affichage de l'élément est héritée de son élément parent ou les règles de style CSS par défaut. Dans l'exemple fourni, la propriété display est définie sur block dans le CSS, mais l'élément lui-même ne définit pas explicitement la propriété display.

Par conséquent, lorsque vous accédez à la propriété element.style.display, elle renvoie une chaîne vide car aucun style en ligne n'est appliqué à l'élément et le style hérité du CSS n'est pas accessible via element.style.

Récupération des styles appliqués par CSS

Si vous avez besoin de récupérer les styles appliqués par CSS, vous pouvez utiliser la méthode window.getComputedStyle(). Cette méthode renvoie un objet qui représente les valeurs de style calculées pour un élément, y compris les styles hérités des éléments parents et appliqués via des feuilles de style en cascade.

Par exemple :

const displayValue = window.getComputedStyle(document.getElementById('test')).display;

Dans ce cas, displayValue contiendra la valeur "block" comme spécifié dans le CSS, même si element.style.display renvoie une chaîne vide.

CSS en ligne vs CSS externe

Bien que le CSS en ligne ne soit pas considéré comme une bonne pratique pour la modularité et la maintenabilité du code, vous devez toujours être conscient des différents comportements des styles en ligne et externes lorsque vous travaillez avec la propriété element.style.

En comprenant ce comportement, vous pouvez récupérez ou modifiez avec précision les styles dans les applications JavaScript et séparez efficacement les préoccupations du code HTML, CSS et 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!