Comment obtenir la taille de police calculée d'un élément DOM en JavaScript ?

Comment récupérer la taille de police calculée en JavaScript

Déterminer la taille de police réelle d'un élément DOM est crucial dans divers scénarios, tels que la personnalisation éditeurs de texte ou conception de mises en page Web réactives. Cela implique de prendre en compte non seulement le style explicite de l'élément, mais également les valeurs héritées et les paramètres au niveau du navigateur.

Solution

Pour obtenir la taille de police calculée, vous pouvez utiliser deux méthodes :

1. Méthode spécifique au navigateur : currentStyle

Pour Internet Explorer, vous pouvez utiliser la propriété currentStyle non standard :

element.currentStyle['fontSize']

Notez que les noms de propriétés contenant des traits d'union, comme font-size, doit être accessible dans camelCase (par exemple, fontSize) pour currentStyle.

2. Méthode standard : getComputedStyle

Pour tous les autres navigateurs et compatibilité entre navigateurs, vous pouvez utiliser la méthode getComputedStyle standard DOM niveau 2 :

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

Exemple d'implémentation

Définir une fonction utilitaire pour récupérer le style :

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)]; 
  }
}

Utilisation :

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

Conseils supplémentaires

• Vérifiez l'existence de document.defaultView avant d'accéder à getComputedStyle.
• Si currentStyle et getComputedStyle ne sont pas disponibles, utilisez element.style pour récupérer Propriétés CSS en ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!