Pourquoi « element.style » renvoie-t-il une valeur vide pour les styles définis en CSS ?

Différence d'attribut de style JavaScript

Q :Pourquoi element.style renvoie-t-il systématiquement une valeur vide lorsque l'affichage est défini en CSS, même si l'élément hérite du style ?

A : La propriété element.style récupère les styles en ligne appliqués directement à un élément dans le document HTML. Les styles définis en CSS ne sont pas considérés comme en ligne et, par conséquent, element.style ne les reflétera pas.

Le style calculé :

JavaScript fournit le window.getComputedStyle() fonction pour obtenir le style efficace réel appliqué à un élément. Cette fonction prend un élément en entrée et renvoie un objet ComputedStyle contenant les valeurs calculées pour toutes les propriétés CSS.

Exemple :

Considérez le code suivant :

<div>

#test {
  display: block;
}

L'accès à document.getElementById('test').style.display renverra une chaîne vide, tandis que window.getComputedStyle(document.getElementById('test')).display renverra correctement "block".

Conclusion :

Pour obtenir les styles CSS appliqués pour un élément, il est nécessaire d'utiliser window.getComputedStyle(). L'utilisation de element.style récupère uniquement les styles en ligne, qui ne sont généralement pas définis pour les éléments avec CSS externe.

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!