Pourquoi « this.style[property] » de JavaScript renvoie-t-il une chaîne vide ?

this.style[property] de JavaScript renvoie une chaîne vide : découverte de la cause et de la solution

Lors de l'accès à this.style[property] propriété en JavaScript, vous pouvez rencontrer des situations dans lesquelles elle récupère une chaîne vide au lieu de la valeur attendue. Cela peut être déroutant, surtout si vous essayez de récupérer des propriétés de style qui ont été définies.

Comprendre le problème

this.style[property] est conçu pour accéder aux styles qui ont été directement attribués à l'élément dans son code HTML ou via des styles en ligne. Si la propriété demandée n'a pas été explicitement définie pour l'élément, this.style[property] renverra une chaîne vide.

Le cas des styles en cascade

Souvent, les styles des éléments sont définis dans des feuilles de style CSS. Ces styles sont en cascade, ce qui signifie qu'ils sont hérités et remplacés en fonction de règles spécifiques. Lorsqu'un élément correspond à plusieurs règles de feuille de style, la règle la plus spécifique est prioritaire.

Dans l'exemple fourni, l'élément #test a deux styles définis dans la feuille de style : height : 100px ; et largeur : 100px ;. Cependant, l'élément a également un style d'arrière-plan en ligne : #CCC ;, qui remplace la règle de feuille de style #test pour l'arrière-plan.

En raison de la nature en cascade du CSS, this.style[width] et this.style [height] récupérera les chaînes vides, car ces propriétés ont été définies dans la feuille de style mais remplacées par le style en ligne.

La solution : getComputedStyle()

Pour récupérer la valeur effective de la propriété de style, qui inclut les styles en cascade, vous pouvez utiliser la méthode getComputedStyle() :

const myElement = document.getElementById('myId');
const style = getComputedStyle(myElement);
console.log(style.height); // "100px"

getComputedStyle() renvoie un objet qui représente le style calculé de l'élément spécifié, en tenant compte de tous les styles appliqués, y compris les propriétés héritées et remplacées.

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!