Pourquoi `this.style[property]` renvoie-t-il une chaîne vide en JavaScript ?

JavaScript this.style[property] Renvoyer une chaîne vide : une clarification

Alors que this.style[property] récupère principalement les styles en ligne appliqués directement à un élément, il existe des cas où une chaîne vide est obtenue. Cela se produit lorsque la propriété en question n'est pas définie explicitement dans les styles en ligne de l'élément.

Dans l'extrait de code fourni :

function css(prop, value) {
  if (value == null) {
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

Lors de l'appel de element.css("height"), vous Nous essayons d'accéder à la propriété de hauteur en ligne. Cependant, dans le code HTML fourni :

<div>

Aucune propriété de hauteur en ligne n'est définie. Par conséquent, this.style["height"] renvoie une chaîne vide.

Pour récupérer la hauteur calculée, qui inclut les styles en cascade à partir de feuilles de style externes ou en ligne, vous pouvez utiliser la méthode getComputedStyle() :

const element = document.getElementById("test");
const style = getComputedStyle(element);
const height = style.height;

Dans ce cas, la hauteur serait égale à "100px".

Pour résoudre le problème dans le code initial, vous pouvez modifier la fonction CSS comme suit :

function css(prop, value) {
  if (value == null) {
    const b = (window.navigator.userAgent).toLowerCase();
    let s;
    if (/msie|opera/.test(b)) {
      s = this.currentStyle;
    } else if (/gecko/.test(b)) {
      s = document.defaultView.getComputedStyle(this, null);
    }
    if (s[prop] != undefined) {
      return s[prop];
    }
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

Avec cette modification, element.css("height") renverrait "100px" car la fonction vérifie désormais également les styles calculés.

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!