Comment récupérer la valeur calculée de la famille de polices à l'aide de JavaScript ?

Récupération d'une famille de polices calculée à l'aide de JavaScript

Cet article se penche sur une extension d'une enquête précédente, explorant comment obtenir le nom réel de la police d'un élément DOM, à l'exclusion de toute solution de repli. Alors que la méthode générique « style calculé » récupère la chaîne de police complète, y compris les solutions de secours, notre objectif est d'isoler la police spécifique utilisée par l'élément.

Pour y parvenir, nous exploitons la méthode getComputedStyle() fournie par la méthode moderne. navigateurs. L'extrait de code suivant illustre l'approche :

<code class="javascript">let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let computedFontFamily = compStyles.getPropertyValue('font-family'); // e.g. "Times New Roman"</code>

Dans l'exemple ci-dessus, para représente l'élément de paragraphe cible. La méthode getComputedStyle() renvoie un objet CSSStyleDeclaration (compStyles) contenant les styles calculés de l'élément. Pour récupérer la famille de polices calculée, utilisez la méthode getPropertyValue('font-family'), qui renvoie une chaîne contenant le nom réel de la police, à l'exclusion de toute solution de secours.

Cette approche est prise en charge par la plupart des principaux navigateurs, notamment Chrome, Firefox, Safari et Edge. Reportez-vous à la documentation du Mozilla Developer Network pour plus de détails : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle.

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!