Obtenir la taille de police calculée pour L'élément DOM dans JS

Est-il possible de détecter le font-size calculé d'un élément DOM, en tenant compte des paramètres génériques établis ailleurs (dans la balise body par exemple), des valeurs héritées, etc.?

Une approche indépendante du framework serait bien, car je travaille sur un script qui devrait fonctionner de manière autonome, mais ce n'est pas une exigence bien sûr.

Contexte: j'essaie de modifier le plugin font selector de CKEditor (source ici) afin qu'il affiche toujours la taille de la police de la position actuelle du curseur (par opposition à seulement dans un span qui a un ensemble font-size explicite, qui est le comportement actuel).

28
demandé sur Pekka 웃 2009-12-23 23:13:10

3 réponses

Vous pouvez essayer d'utiliser L'IE non standardelement.currentStyle propriété, sinon vous pouvez rechercher la norme DOM Level 2 getComputedStyle méthode si disponible: 

function getStyle(el,styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el,null)
                               .getPropertyValue(styleProp);
  } else {
    return el.style[camelize(styleProp)]; 
  }
}

Utilisation:

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

Plus d'Informations:

Edit: Grâce à @Croissant Frais, @kangax et @Pekka pour les commentaires.

Changements:

  • Ajouté camelize fonction, puisque les propriétés contenant des hypens, comme font-size, doivent être accessibles en tant que camelCase (par exemple.: fontSize) sur l'objet currentStyle IE.
  • vérifier l'existence de document.defaultView avant d'accéder à getComputedStyle.
  • Ajouté dernier cas, lorsque el.currentStyle et getComputedStyle ne sont pas disponibles, obtenez la propriété CSS en ligne via element.style.
50
répondu CMS 2009-12-24 21:55:08

Pour surmonter le problème 'em', j'ai rapidement écrit une fonction, si la police-size dans ie est 'em', la fonction calcule avec la police-size du corps.

        function getFontSize(element){
        var size = computedStyle(element, 'font-size');
        if(size.indexOf('em') > -1){
            var defFont = computedStyle(document.body, 'font-size');
            if(defFont.indexOf('pt') > -1){
                defFont = Math.round(parseInt(defFont)*96/72);
            }else{
                defFont = parseInt(defFont);
            }
            size = Math.round(defFont * parseFloat(size));
        } 
        else if(size.indexOf('pt') > -1){
            size = Math.round(parseInt(size)*96/72)
        }
        return parseInt(size);
    }

    function computedStyle(element, property){
        var s = false;
        if(element.currentStyle){
            var p = property.split('-');
            var str = new String('');
            for(i in p){
                str += (i > 0)?(p[i].substr(0, 1).toUpperCase() + p[i].substr(1)):p[i];
            }
            s = element.currentStyle[str];
        }else if(window.getComputedStyle){
            s = window.getComputedStyle(element, null).getPropertyValue(property);
        }
        return s;
    }
2
répondu Frans Dutch 2011-06-22 22:40:36

On dirait que jQuery (au moins 1.9) utilise getComputedStyle() ou currentStyle lui-même lorsque vous utilisez $('#element')[.css][1]('fontSize'), donc vous ne devriez vraiment pas avoir à vous soucier de solutions plus compliquées si vous êtes OK en utilisant jQuery.

Testé dans IE 7-10, FF et Chrome

2
répondu Tom Auger 2013-04-11 03:12:27