Pourquoi « element.style » renvoie-t-il des valeurs vides lorsque les styles CSS sont définis dans un fichier séparé ?

Comprendre les propriétés de style CSS en JavaScript

Lorsqu'ils référencent les propriétés de style CSS en JavaScript, les développeurs rencontrent souvent un problème inattendu : element.style renvoie un fichier vide. valeurs malgré la définition des styles dans le fichier CSS. Cet article vise à faire la lumière sur ce comportement et à expliquer pourquoi il se produit.

La différence entre les styles en ligne et calculés

La propriété element.style de JavaScript permet d'accéder aux styles en ligne. défini directement dans un élément HTML. Toutefois, lorsque les styles CSS sont définis séparément dans un fichier CSS, ils ne sont pas considérés comme des styles en ligne. Au lieu de cela, ils deviennent des styles calculés.

Styles calculés : les valeurs appliquées

Les styles calculés représentent les propriétés de style réelles appliquées à un élément après avoir pris en compte tous les styles hérités et les règles CSS. et les valeurs par défaut du navigateur. Pour accéder aux styles calculés en JavaScript, utilisez la fonction getComputedStyle().

Explication des valeurs vides element.style

element.style contient uniquement les styles en ligne. Étant donné que les styles CSS ne sont pas définis en ligne, ils ne sont pas accessibles via element.style et renvoient donc des valeurs vides.

Exemple :

<div>

#test {
  display: block;
}

console.log(document.getElementById('test').style.display); // Returns ""

Utiliser getComputedStyle pour récupérer les styles calculés

Pour obtenir le style appliqué propriétés, y compris celles définies en CSS, utilisez getComputedStyle():

console.log(window.getComputedStyle(document.getElementById('test')).display); // Returns "block"

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!