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

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

Mary-Kate Olsen
Libérer: 2024-11-22 02:51:19
original
788 Les gens l'ont consulté

How Can I Get the Computed Font Size of a DOM Element in JavaScript?

Obtention de la taille de police calculée dans les éléments DOM à l'aide de JavaScript

Détermination de la taille de police réelle appliquée à un élément DOM, en tenant compte des paramètres hérités et globaux, peut être une tâche courante dans le développement Web. Ceci est particulièrement utile lorsque vous travaillez avec des plugins ou automatisez des tâches qui nécessitent des informations précises sur la taille de la police.

Approche générique pour la détection de la taille de police calculée

Pour obtenir une taille de police indépendante du framework récupération, vous pouvez tirer parti des éléments suivants approche :

function getStyle(el, styleProp) {
  // Convert property name to camelCase for IE compatibility
  let camelize = (str) => str.replace(/\-(\w)/g, s => s[1].toUpperCase());

  // Attempt IE's non-standard currentStyle
  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  }
  // Try DOM Level 2 getComputedStyle if available
  else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
  // Fallback to inline style
  else {
    return el.style[camelize(styleProp)];
  }
}
Copier après la connexion

Utilisation :

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

En utilisant cette approche, vous pouvez obtenir la taille de police calculée pour n'importe quel élément DOM, quel que soit son héritage ou paramètres globaux.

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!

source:php.cn
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