Wie erhalte ich die berechnete Schriftgröße eines DOM-Elements in JavaScript?

So rufen Sie die berechnete Schriftgröße in JavaScript ab

Die Bestimmung der tatsächlichen Schriftgröße eines DOM-Elements ist in verschiedenen Szenarien, wie z. B. beim Anpassen, von entscheidender Bedeutung Texteditoren oder das Entwerfen responsiver Weblayouts. Dabei muss nicht nur der explizite Stil des Elements berücksichtigt werden, sondern auch geerbte Werte und Einstellungen auf Browserebene.

Lösung

Um die berechnete Schriftgröße zu erhalten, können Sie zwei Methoden nutzen :

1. Browserspezifische Methode: currentStyle

Für Internet Explorer können Sie die nicht standardmäßige Eigenschaft currentStyle verwenden:

element.currentStyle['fontSize']

Beachten Sie, dass Eigenschaftsnamen, die Bindestriche enthalten, wie z. B. „font-size“, Der Zugriff muss in camelCase (z. B. FontSize) für currentStyle erfolgen.

2. Standardmethode: getComputedStyle

Für alle anderen Browser und browserübergreifende Kompatibilität können Sie die DOM Level 2-Standardmethode getComputedStyle verwenden:

document.defaultView.getComputedStyle(element, null).getPropertyValue('fontSize')

Implementierungsbeispiel

Definieren Sie eine Dienstprogrammfunktion zum Abrufen der Stil:

function getStyle(element, styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };
  
  if (element.currentStyle) {
    return element.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(element,null)
                               .getPropertyValue(styleProp);
  } else {
    return element.style[camelize(styleProp)]; 
  }
}

Verwendung:

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

Zusätzliche Tipps

• Überprüfen Sie die Existenz von document.defaultView, bevor Sie auf getComputedStyle zugreifen.
• Wenn sowohl currentStyle als auch getComputedStyle nicht verfügbar sind, verwenden Sie element.style zum Abrufen Inline-CSS-Eigenschaften.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die berechnete Schriftgröße eines DOM-Elements in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!