Heim >Web-Frontend >CSS-Tutorial >Warum gibt „this.style[property]' eine leere Zeichenfolge für geerbte Stile zurück?

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

DDD
DDDOriginal
2024-12-04 10:37:12218Durchsuche

Why Does `this.style[property]` Return an Empty String for Inherited Styles?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn