Obtenir calculé de la taille de la police de l'élément DOM en JS

Est-il possible de détecter la calculés font-size d'un élément du DOM, en tenant compte de paramètres génériques fabriqués ailleurs (Dans le body tag par exemple), des valeurs héritées, et ainsi de suite?

Un cadre d'approche indépendant serait bien, comme je suis en train de travailler sur un script qui devrait fonctionner de manière autonome, mais ce n'est pas une obligation bien sûr.

Contexte: je suis en train de peaufiner CKEditor est sélecteur de polices plugin (source ici), de sorte qu'il indique toujours la taille de la police de la position actuelle du curseur (contre seulement quand, dans une span qui a explicitement font-size jeu, ce qui est le comportement actuel).

"Calculé", comme dans la taille en pixels?
Pour le scénario actuel: pixels seulement, mais en général, il serait très agréable d'être en mesure d'obtenir à la fois la valeur définie (px,pt,em) et le pixel un.
si c'est des pixels seulement, vous êtes bon. pt, em etc vont être impossible, seulement IE currentStyle pouvez l'obtenir.

InformationsquelleAutor Pekka 웃 | 2009-12-23

52

Vous pouvez essayer d'utiliser la non-standard d'IE élément .currentStyle bien, sinon, vous pouvez regarder pour le DOM Niveau 2 standard 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'infos:
- Obtenir Les Styles (QuirksMode)
Edit: Grâce à @Croissant Frais, @kangax et @Pekka pour les commentaires.

Changements:
- Ajouté camelize fonction, puisque les propriétés contenant hypens, comme font-size, doit être accessible en tant que camelCase (eg.: fontSize) sur la currentStyle IE objet.
- Vérification de l'existence de document.defaultView avant d'accéder à getComputedStyle.
- Ajouté dernier cas, lorsque el.currentStyle et getComputedStyle ne sont pas disponibles, obtenir les CSS des biens par element.style.
- Cela ressemble beaucoup, va l'essayer.
- Attention, currentStyle et getComputedStyle sont fondamentalement différents: erik.eae.net/archives/2007/07/27/18.54.15 getComputedStyle est incapable d'obtenir le hérité du style, et toujours calcule comme px, si la valeur a été déclarée comme px ou pas.
- Merci pour l'avertissement. Très bon à savoir. Pour le travail à la main c'est bien, comme indiqué ci-dessus.
- C'est en fait document.defaultView.getComputedStyle, pas window.getComputedStyle (MDC s'il se trompe, ou s'il considère que son propre — Mozilla — seulement la mise en œuvre). getComputedStyle est spécifié pour être un membre de AbstractView, qui document.defaultView met en œuvre, et il n'y a vraiment aucune garantie que window == document.defaultView (ni dans les specs, ni dans la pratique; en fait, Safari 2.x est un bon exemple de window != document.defaultView). Il est intéressant de noter que PPK fait une erreur similaire dans getstyles l'article que vous avez lié à (test defaultView sur window).
- Merci beaucoup pour votre aide les gars. Je l'ai eu à travailler avec Firefox, mais je suis coincé avec IE. Si vous souhaitez prendre un coup d'oeil: stackoverflow.com/questions/1956573/runtimestyle-in-ie7-8
- Triés. @CMS, si je ne me trompe pas, vous devez modifier votre réponse au point que currentStyle acceptera camelized propriétés (par exemple, fontSize), tandis que getPropertyValue fonctionne avec la forme originale (font-size).
- Merci beaucoup pour les commentaires les gars, édité pour vérifier document.defaultView au lieu de window comme @kangax souligne également ajouté un camelize fonction permettant d'obtenir de bonnes propriétés lorsque vous travaillez avec des el.currentStyle, tout obtenir de la rétroaction est vraiment apprécié!
- Eh bien, ce serait également une bonne idée de vérifier l'existence de document.defaultView avant d'accéder à getComputedStyle sur elle.
- Quelqu'un sait pourquoi cela ne fonctionne pas avec jQuery ? si je remplace le var element = document.getElementById('elementId'); getStyle(élément 'font-size'); par getStyle($('#elementId'), 'font-size') il y a une erreur javascript...
- c'est parce que $('#elementId') retourne un objet jQuery tandis que le CMS est getStyle fonction s'attend à un élément du DOM. Utilisation getStyle($('#elementId')[0], 'font-size') à la place.
InformationsquelleAutor CMS

À surmonter les " em "problème, j'ai rapidement écrit une fonction, si la taille de police dans ie est "em", la fonction calcule avec la police du corps de texte de taille.

        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;
    }

InformationsquelleAutor Frans Dutch

2

Ressemble à jQuery (1.9 au moins) utilise getComputedStyle() ou currentStyle lui-même lorsque vous utilisez $('#element')[.css][1]('fontSize'), de sorte que vous ne devriez vraiment pas avoir à s'embêter avec plus compliqué solutions si vous êtes OK à l'aide de jQuery.

Testé sous IE 7 À 10, FF et Chrome

InformationsquelleAutor Tom Auger

Vous devez vous connecter pour publier un commentaire.