Wie kann ich die Schriftgröße in HTML zuverlässig abrufen und aktualisieren, selbst wenn sie in einem Stylesheet definiert ist?

Schriftgröße in HTML abrufen

In HTML kann die Schriftgröße eines Elements mithilfe von CSS angegeben werden. Typischerweise wird die Eigenschaft style.fontSize verwendet, um die Schriftgröße festzulegen oder abzurufen. Das Abrufen der Schriftgröße kann jedoch eine Herausforderung darstellen, wenn sie in einem Stylesheet definiert ist.

Verwendung von style.fontSize

Im folgenden Beispiel wird versucht, die Schriftart abzurufen und dann zu aktualisieren Größe eines Elements mit style.fontSize:

var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

Dieser Code funktioniert jedoch möglicherweise nicht, wenn die Schriftgröße extern definiert wird in einem CSS-Stylesheet. In solchen Fällen gibt style.fontSize eine leere Zeichenfolge zurück, was zu unerwarteten Ergebnissen führen kann.

Verwenden von window.getComputedStyle

Um sogar die Schriftgröße genau abzurufen Wenn es in einem Stylesheet definiert ist, verwenden Sie die Methode window.getComputedStyle. Diese Methode berechnet den tatsächlichen Stil des Elements:

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); // Converts the retrieved value to a float
el.style.fontSize = (fontSize + 1) + 'px'; // Updates the font size

Durch die Verwendung von window.getComputedStyle können Sie die Schriftgröße eines Elements zuverlässig abrufen und aktualisieren, unabhängig davon, wie es im Stylesheet definiert ist.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße in HTML zuverlässig abrufen und aktualisieren, selbst wenn sie in einem Stylesheet definiert ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!