Comment puis-je accéder aux informations sur les polices rendues en JavaScript lorsque les définitions CSS sont absentes ?

Accès à la police rendue en l'absence de définitions CSS

Lors de l'inspection des propriétés d'un élément HTML, il peut être évident que des informations vitales comme font-face et font-size sont manquants lors de l'utilisation de l'attribut object.style de JavaScript. En effet, le style de l'élément est hérité du CSS de la page Web et jusqu'à ce que ces propriétés soient explicitement définies, l'attribut object.style reste vide.

Cependant, il est toujours possible de récupérer les informations réelles sur la police rendue en utilisant la méthode getComputedStyle. Voici une fonction JavaScript qui accomplit cela :

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

Pour utiliser cette fonction, transmettez simplement l'élément que vous souhaitez inspecter et la propriété que vous souhaitez récupérer, telle que « taille de police ». Par exemple :

css(object, 'font-size'); // Returns '16px' or similar

Il est important de noter que cette méthode n'est pas prise en charge dans Internet Explorer 8.

Démo en direct :

Cliquez ici pour voir une démonstration en direct sur JSFiddle : http://jsfiddle.net/4mxzE/

Extrait de code :

// Retrieve the computed style information
console.log(
  getComputedStyle(document.getElementById('test'), null)
    .getPropertyValue('font')
);

// Define a custom CSS style for the element
document.getElementById('test').style.cssText = 'font-family: fantasy, cursive;';

// Append an HTML element to the document
document.body.appendChild(document.getElementById('test'));

#test {
  /* Custom font-face applied */
}

<!-- Element with rendered font -->
<div></div>

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!