Dev Faq
10
votes

Comment puis-je obtenir la taille de la police d'un élément tel qu'il a été défini par CSS

J'écris une simple jQuery qui pour changer la taille de la police d'un élément par un certain pourcentage. Le problème que j'ai, c'est que lorsque je reçois la taille avec JQuery's $ ('# el'). CSS ("Font-Taille") Retourne toujours une valeur de pixel, même lorsqu'il est défini avec EM's. Lorsque j'utilise la propriété El.style.font-Taille de Javscript, il ne retournera pas une valeur tant que l'on n'a pas été explicitement définie par la même propriété.

Y a-t-il une manière que je puisse obtenir la valeur de la taille de la police d'origine CSS Set avec JavaScript? Comment votre méthode est-elle conviviale?

Merci d'avance!

EDIT: Je dois noter que tous les navigateurs testés (voir le commentaire ci-dessous) permettent de définir la taille de texte à l'aide d'une valeur «EM» à l'aide des deux méthodes mentionnées ci-dessus, à quel point. Le jQuery .CSS () renvoie une valeur «px» équivalente et la méthode JavaScript.Style.FontSize renvoie la valeur «EM» correcte. Peut-être que la meilleure façon de le faire serait d'initialiser les éléments sur la charge de la page, en leur donnant une valeur EM immédiatement.

2 commentaires

Dans quel navigateur se produisent-il?

Safari Webkit 4 Nightly, FF 3.5 (OS X / Win), Ie 6, Chrome 2 (gagnant)

4 Réponses :

1
votes

Ce plug-in jquery semble être le truc:

Mise à jour: Plugin JQuery pour conserver des interfaces évolutives avec la conversion pixel-to-em

Github: JQuery-Pixel-em-Converter

0 commentaires
1
votes

J'ai eu ce problème une fois. J'utilise cette fonction pour obtenir la valeur INT d'un attribut CSS, s'il en existe un. 

function PBMtoInt(str)
{ 
return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0");
}

1 commentaires

Parseint jette déjà tout ce qui suit le premier caractère non numérique, il s'agit donc d'équivalent: Val = parseint (STR); retour (val == nan)? 0: val;

8
votes

Tous vos navigateurs cible à l'exception d'IE vous rendront compte à vous le " style calculé " de l'élément. Dans votre cas, vous ne veux pas pour savoir ce que la taille de la taille px est pour la taille de la police , mais vous voulez plutôt que la valeur définie votre feuille de style (s).

Seulement IE peut obtenir ce droit avec son CurrentStyle . Malheureusement, JQuery dans ce cas fonctionne contre vous et vous obtient même à savoir signaler la taille calculée dans px (il utilise Ce piratage par Dean Edwards pour le faire, vous pouvez vérifier la source vous-même).

Donc, en un mot, ce que vous voulez est un navigateur croisé impossible. Seulement IE peut le faire (à condition que vous suiviez Bypass jQuery pour accéder à la propriété). Votre solution de réglage de la valeur en ligne (par opposition à une feuille de style) est la meilleure que vous puissiez faire, car le navigateur n'a pas besoin de calculer quoi que ce soit.

1 commentaires

Ne dites jamais "impossible" :-) (sauf si vous êtes vraiment sûr vraiment sûr)

2
votes

en chrome: xxx pré>

retourne un objet cssrulelist code>. Besoin de faire un peu plus d'expérimentation avec cela, mais on dirait si m puis le csssttyle code> at règles [n] code> remplace celui-ci at règles [m] code>. Donc: P> 

for(var i = rules.length - 1; i >= 0; --i) {
    if(rules[i].style.fontSize) {
        return /.*(em|ex|ch|rem|vh|vw|vmin|vmax|px|in|mm|cm|pt|pc|%)$/.exec(rules[i].style.fontSize)[1];
    }
}

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO