Pourquoi « element.style » renvoie-t-il vide lorsque les styles sont définis dans un fichier CSS externe ?

Comprendre pourquoi element.style renvoie un contenu vide

En JavaScript, la propriété element.style renvoie généralement les attributs de style en ligne appliqués directement à un élément dans le document HTML. Cependant, le style en ligne n'est pas l'approche préférée pour styliser les éléments car il peut entraîner des problèmes d'incohérence du code et de maintenabilité.

Cependant, le problème survient lorsque vous définissez explicitement des styles dans un fichier CSS externe, puis tentez d'y accéder. styles en utilisant element.style. Dans ce cas, element.style renverra toujours un objet vide, vous laissant perplexe.

Styles en ligne et styles calculés

Pour comprendre ce comportement, il est crucial de comprendre la distinction entre les styles en ligne et calculés. Les styles en ligne font référence aux attributs de style directement appliqués à un élément du document HTML, tandis que les styles calculés représentent la combinaison de tous les styles applicables provenant de chaque source applicable, y compris les styles en ligne, les feuilles de style CSS et les styles d'agent utilisateur.

Incapacité de JavaScript à lire directement les styles CSS

JavaScript, à lui seul, n'a pas la capacité de lire directement les styles CSS. Au lieu de cela, il s'appuie sur le moteur de rendu du navigateur, qui calcule les styles calculés en fonction des règles en cascade de CSS.

Par conséquent, lorsque vous accédez à element.style, vous accédez uniquement aux styles en ligne, qui sont absents dans votre cas car vous avez fourni des styles dans un fichier CSS externe. Pour obtenir les styles calculés, qui incluent à la fois les styles CSS en ligne et externes, vous devez utiliser la fonction window.getComputedStyle(element).

Solution : Utilisation de getComputedStyle

Dans votre scénario, la fonction getComputedStyle fournira le résultat souhaité :

console.log(window.getComputedStyle(document.getElementById('test')).display);

Cette ligne de code enregistrera la valeur de la propriété display telle que définie dans votre fichier CSS, même si element.style.display renvoie un chaîne vide.

Donc, la clé à retenir est que element.style est spécifique aux styles en ligne, tandis que window.getComputedStyle donne accès aux styles CSS en ligne et externes, ce dont vous avez besoin pour récupérer avec précision les informations de style.

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!