Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Schriftgröße in HTML genau abrufen und anpassen?

Wie kann ich die Schriftgröße in HTML genau abrufen und anpassen?

Mary-Kate Olsen
Freigeben: 2024-12-15 10:14:13
Original
385 Leute haben es durchsucht

How Can I Accurately Retrieve and Adjust Font Size in HTML?

Schriftgröße in HTML abrufen

Das Ermitteln der Schriftgröße eines HTML-Elements kann wie eine unkomplizierte Aufgabe erscheinen. Allerdings führt der einfache Zugriff auf die style.fontSize-Eigenschaft möglicherweise nicht immer zum gewünschten Ergebnis, insbesondere wenn die Schriftgröße in einem externen Stylesheet definiert ist.

Um einen genauen Schriftgrößenwert zu erhalten, verwenden Sie window.getComputedStyle() Verfahren. Diese Funktion berechnet den effektiven Stil eines Elements, einschließlich aller von seinen Vorgängern geerbten Stile. Hier ein Beispiel:

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
Nach dem Login kopieren

Dieser Code ruft die berechnete Schriftgröße des Elements mit der ID „foo“ ab und speichert sie in der Variable „fontSize“. Jetzt haben Sie Zugriff auf den tatsächlichen Schriftgrößenwert.

Mit diesem Ansatz können Sie dynamische Schriftgrößenanpassungen implementieren. Zum Beispiel:

el.style.fontSize = (fontSize + 1) + 'px';
Nach dem Login kopieren

Diese Codezeile erhöht die Schriftgröße des „foo“-Elements um einen Schritt. Sie können „1“ durch einen beliebigen Wert ersetzen, um die Schriftgröße nach Bedarf zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße in HTML genau abrufen und anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage