Warum gibt „this.style[property]' in JavaScript eine leere Zeichenfolge zurück?

JavaScript this.style[property] Gibt eine leere Zeichenfolge zurück: Eine Klarstellung

Während this.style[property] hauptsächlich angewendete Inline-Stile abruft direkt auf ein Element anwenden, gibt es Fälle, in denen eine leere Zeichenfolge erhalten wird. Dies geschieht, wenn die betreffende Eigenschaft nicht explizit in den Inline-Stilen des Elements festgelegt ist.

Im bereitgestellten Code-Snippet:

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

Beim Aufruf von element.css("height"), Sie Ich versuche, auf die Inline-Höheneigenschaft zuzugreifen. Im bereitgestellten HTML heißt es jedoch:

<div>

Es ist keine Inline-Höheneigenschaft definiert. Daher gibt this.style["height"] eine leere Zeichenfolge zurück.

Um die berechnete Höhe abzurufen, die Kaskadenstile aus externen oder Inline-Stylesheets umfasst, können Sie die Methode getComputedStyle() verwenden:

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

In diesem Fall würde die Höhe „100px“ betragen.

Um das Problem im ursprünglichen Code zu beheben, können Sie das CSS ändern Funktion wie folgt:

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;
}

Mit dieser Änderung würde element.css("height") „100px“ zurückgeben, da die Funktion jetzt auch nach berechneten Stilen sucht.

Das obige ist der detaillierte Inhalt vonWarum gibt „this.style[property]' in JavaScript eine leere Zeichenfolge zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!