Warum gibt „this.style[property]' beim Abrufen von CSS-Eigenschaften in JavaScript manchmal eine leere Zeichenfolge zurück?

Stileigenschaften aus JavaScript abrufen

Beim Umgang mit CSS-Stilen in JavaScript gibt es Situationen, in denen this.style[property] eine zurückgeben kann leere Zeichenfolge.

Verständnis this.style[property]

this.style[property] greift auf die Inline-Stile des aktuellen Elements zu. Inline-Stile sind solche, die direkt im

Beispielszenario

Betrachten Sie den folgenden Code:

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

Mit dieser Funktion können Sie abrufen oder festlegen CSS-Eigenschaften für ein Element mithilfe von element.css(property, value).

Wenn Sie jedoch versuchen, eine Eigenschaft abzurufen, die ist nicht inline festgelegt, wie z. B. height im folgenden Beispiel:

<div>
<pre class="brush:php;toolbar:false">const element = document.getElementById('test');
const height = element.css('height'); // Returns ""

In diesem Fall gibt height eine leere Zeichenfolge zurück, da es nicht als Inline-Stil definiert ist.

Lösung

Um auf CSS-Eigenschaften zuzugreifen, die in externen Stylesheets oder mithilfe von Klassen definiert sind, können Sie die Funktion getComputedStyle() verwenden. Diese Funktion ruft den berechneten Stil eines Elements ab, einschließlich aller darauf angewendeten Stile:

const element = document.getElementById('test');
const height = getComputedStyle(element).height; // Returns "100px"

Im aktualisierten Code, den Sie bereitgestellt haben, haben Sie die CSS-Funktion korrigiert, indem Sie getComputedStyle() verwendet haben, um den berechneten Stil abzurufen des Elements:

function css(prop, value) {
  // Code to get or set CSS properties
  if (value == null) {
    var b = (window.navigator.userAgent).toLowerCase();
    var 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];
  }
  // Code to continue with your logic
}

Mit dieser aktualisierten Funktion können Sie jetzt CSS-Eigenschaften korrekt abrufen, die in externen Stylesheets oder mithilfe von Klassen definiert sind, auch wenn sie nicht festgelegt sind als Inline-Stile.