Pourquoi `this.style[property]` renvoie-t-il une chaîne vide pour les styles hérités ?

Comprendre le retour de chaîne vide de this.style[property]

Lors de l'accès à la propriété de style d'un élément HTML, en utilisant la syntaxe this.style[property], il est important de noter qu'il renvoie uniquement les styles directement appliqués à l'élément lui-même. Les styles hérités de feuilles de style externes ou calculés à partir de règles en cascade ne sont pas inclus.

Dans l'extrait de code fourni :

function css(prop, value) {
  if (value == null) {
    // retrieve style
    return this.style[prop]; // returns an empty string
  }
  // set style
}

L'appel d'element.css("height") renverra une chaîne vide car le style de hauteur est défini dans la feuille de style externe. Le style en ligne appliqué à l'élément (arrière-plan : #CCC) n'est pas pertinent ici.

Comment récupérer les informations de style calculé

Pour récupérer la valeur effective d'un style, y compris ceux hérités ou calculés , utilisez la fonction getComputedStyle() :

const style = getComputedStyle(element);
console.log(style.height); // returns "100px"

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!