Warum gibt „this.style[property]' eine leere Zeichenfolge für geerbte Stile zurück?

Verstehen der leeren Zeichenfolgenrückgabe von this.style[property]

Wenn Sie auf die style-Eigenschaft eines HTML-Elements zugreifen und die Syntax this.style[property] verwenden, Es ist wichtig zu beachten, dass nur Stile zurückgegeben werden, die direkt auf das Element selbst angewendet werden. Stile, die von externen Stylesheets geerbt oder aus kaskadierenden Regeln berechnet wurden, sind nicht enthalten.

Im bereitgestellten Code-Snippet:

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

Der Aufruf von element.css("height") gibt eine leere Zeichenfolge zurück, weil Der Höhenstil wird im externen Stylesheet definiert. Der auf das Element angewendete Inline-Stil (Hintergrund: #CCC) ist hier nicht relevant.

So rufen Sie berechnete Stilinformationen ab

Um den effektiven Wert eines Stils abzurufen, einschließlich der geerbten oder berechneten , verwenden Sie die Funktion getComputedStyle():

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

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