Etant en train de développer un addon pour Firefox/Firebug qui aidera plus d’un développeur (en tout cas moi) j’ai eu besoin de connaitre le fontFamily d’un élément. Dans cet article je ne traiterai donc que de la façon de récupérer un fontFamily. Cependant la récupération d’autres propriétés CSS (via une fonction générique par exemple) est tout à fait possible.
Si le fontFamily a directement été défini (in-line) sur l’élément
<span id='monEl' style='font-family:Tahoma'>Javascript</span> ... alors un simple :
document.getElementById('monEl').style.fontFamily; ou
$('#monEl').css('fontFamily'); ... suffit pour récupérer la valeur de la propriété fontFamily de l’élément.
Maintenant si l’on supprime l’attribut style de notre span#monEl le code suivant retournera une chaine vide :
document.getElementById('monEl').style.fontFamily;//retourne "" Cependant le code jQuery, lui, fonctionnera.
Arriver à nos fin sans jQuery
Au début je pensait qu’il suffirait d’effectuer une boucle sur les éléments parents du DOM : remonter à chaque fois d’un élément et dès qu’un élément a un fontFamily de valide, stopper la boucle et retourner sa valeur. Mais il y a beaucoup plus simple.
jQuery procède d’une façon différente. En regardant son code de plus près j’ai découvert qu’il avait recourt à la méthode DOM de niveau 2 getComputedStyle() pour récupérer la valeur d’un attribut CSS hérité d’un élément parent. Malheureusement cette méthode ne semble pas être intégré sous IE qui lui dispose de la propriété currentStyle.
Voici donc une fonction (basé sur le code utilisé par jQuery) qui retourne, pour un élément donné, la valeur du fontFamily associé :
function getFontFamily(el){
var ret;
if (el.style && el.style['fontFamily'])//Si l'élément a déjà la propriété de définie
ret = el.style['fontFamily'];
else if (document.defaultView.getComputedStyle){//Firefox, Opera
var computedStyle = document.defaultView.getComputedStyle(el, null );
if(computedStyle)
ret = computedStyle.fontFamily;
}
else if (el.currentStyle)//Internet Explorer
ret = el.currentStyle['fontFamily'];
return ret;
} Testé sous Firefox et Chrome.