Maison > interface Web > tutoriel CSS > Comment obtenir la taille de police calculée d'un élément DOM en JavaScript ?

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

Patricia Arquette
Libérer: 2024-11-28 03:39:14
original
536 Les gens l'ont consulté

How to Get the Computed Font Size of a DOM Element in 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']
Copier après la connexion

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')
Copier après la connexion

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)]; 
  }
}
Copier après la connexion

Utilisation :

var element = document.getElementById('elementId');
getStyle(element, 'font-size');
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal