Maison >interface Web >tutoriel CSS >Comment puis-je obtenir la police rendue d'un élément sans définitions de police CSS en JavaScript ?

Comment puis-je obtenir la police rendue d'un élément sans définitions de police CSS en JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-02 15:28:15462parcourir

How Can I Get the Rendered Font of an Element Without CSS Font Definitions in JavaScript?

Récupération de la police réellement rendue en l'absence de définitions CSS

Dans le domaine de JavaScript, les développeurs rencontrent souvent le besoin de vérifier la police réelle police utilisée pour restituer un élément spécifique, même lorsque les attributs liés à la police ne sont pas explicitement définis dans le CSS. Ce défi survient lorsque le système ou le navigateur Web utilise les paramètres de police par défaut pour le rendu.

Solution :

Pour découvrir la police cachée, les développeurs peuvent exploiter la fonction getComputedStyle, qui extrait le style calculé d'un élément. En introduisant la propriété souhaitée comme argument, on peut obtenir la valeur rendue, y compris la famille et la taille de la police. Voici une fonction personnalisée qui simplifie le processus :

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

Utilisation :

Pour récupérer la taille de la police, par exemple, invoquez simplement la fonction ainsi :

css(object, 'font-size'); // returns '16px', assuming that's the rendered size

Remarques importantes :

  • Cette méthode est non pris en charge dans Internet Explorer 8.
  • La fonction renvoie une chaîne, un traitement ultérieur peut donc être nécessaire pour extraire des informations spécifiques telles que la famille ou la taille de la police.

Démonstration en direct :

Pour un exemple pratique, visitez la démo en direct sur http://jsfiddle.net/4mxzE/. Ce violon montre l'utilisation de la fonction css() pour récupérer la police rendue pour un élément div avec une police non spécifiée.

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:
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