Comment puis-je déterminer avec précision la taille de la police d'un élément HTML ?

Détermination de la taille de la police en HTML

Déterminer la taille de la police d'un élément de texte est une tâche courante dans le développement Web. Cependant, s'appuyer uniquement sur la propriété 'style.fontSize' peut ne pas suffire dans tous les cas.

Problème et contexte

Dans l'exemple fourni, 'style.fontSize' ne parvient pas à fournir le résultat souhaité lors de la récupération de la valeur de la taille de police. En effet, la taille de la police peut être héritée d'une feuille de style, ce qui entraîne une valeur de chaîne vide ('').

Solution : Utiliser 'window.getComputedStyle()'

Pour obtenir avec précision la taille de police, utilisez la méthode 'window.getComputedStyle()'. Cette méthode fournit des valeurs calculées pour le style de l'élément, y compris les propriétés héritées.

Voici un exemple mis à jour :

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); // Convert to a float
el.style.fontSize = (fontSize + 1) + 'px'; // Add 1 to the size and set it with units

En utilisant 'window.getComputedStyle()', vous obtenez la véritable taille de police calculée. comme valeur flottante. Cela permet une manipulation précise de la taille de police, répondant aux limitations de « style.fontSize » pour les propriétés héritées.

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!