Comment obtenir la taille de la police en HTML

Question

J'ai lu une question ici pour essayer d'obtenir la taille de la police d'un texte. La réponse donnée était d'obtenir la taille des pixels en utilisant une méthode de mesure. Tout ce que je veux, c'est être capable d'obtenir la valeur de la taille de la police pour pouvoir la modifier.

Par exemple :

var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

Cet exemple ne fonctionne pas, mais les deux exemples suivants fonctionnent

1. document.getElementById("foo").style.fontSize = "larger";
2. document.getElementById("foo").style.fontSize = "smaller";

Le seul problème est qu'il ne change la taille qu'une seule fois.

Answer 1

Il suffit de saisir le style.fontSize d'un élément peut ne pas fonctionner. Si le font-size est défini par une feuille de style, cela rapportera "" (chaîne vide).

Vous devez utiliser window.getComputedStyle .

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

Answer 2

Si votre élément n'a pas la propriété font-size, votre code retournera une chaîne vide. Il n'est pas nécessaire que votre élément ait la propriété font-size. L'élément peut hériter des propriétés des éléments parents.

Dans ce cas, vous devez trouver la taille de la police calculée. Essayez ceci (je ne suis pas sûr pour IE)

var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize;

console.log(computedFontSize);

La variable computedFontSize renverra la taille de la police avec l'unité. L'unité peut être px, em, %. Vous devez enlever l'unité pour faire une opération arithmétique et assigner la nouvelle valeur.

Answer 3

Si vous utilisez Jquery, voici la solution.

var fontSize = $("#foo").css("fontSize");
fontSize  = parseInt(fontSize) + 1 + "px";
$("#foo").css("fontSize", fontSize );

J'espère que ça va marcher.

Answer 4

La valeur que vous obtenez de fontSize est quelque chose comme "12px" ou "1,5em", donc en ajoutant 1 à cette chaîne, vous obtiendrez "12px1" ou "1,5em1". Vous pouvez prendre la taille de la police et la manipuler avec :

var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;

Answer 5

1. si le élément html a style en ligne vous pouvez utiliser le .style.fontSize pour obtenir le taille de la police !
2. lorsque le élément html n'a pas style en ligne vous devez utiliser l'option Window.getComputedStyle() pour obtenir le taille de la police !

Voici mes codes de démonstration !

function tureFunc() {
    alert(document.getElementById("fp").style.fontSize);
    console.log(`fontSize = ${document.getElementById("fp").style.fontSize}`);
}
function falseFunc() {
    alert( false ? document.getElementById("fh").style.fontSize : "check the consloe!");
    console.log(`fontSize = ${document.getElementById("fh").style.fontSize}`);
}
function getTheStyle(){
    let elem = document.getElementById("elem-container");
    let fontSize = window.getComputedStyle(elem,null).getPropertyValue("font-size");
    // font-size !=== fontSize
    console.log(`fontSize = ${fontSize}`);
       alert(fontSize);
    document.getElementById("output").innerHTML = fontSize;
}
// getTheStyle();

<p id="fp" style="font-size:120%">
    This is a paragraph.
    <mark>inline style : <code>style="font-size:120%"</code></mark>
</p>
<button type="button" onclick="tureFunc()">Return fontSize</button>
<h3 id="fh">
    This is a H3. <mark>browser defualt value</mark>
</h3>
<button type="button" onclick="falseFunc()">Not Return fontSize</button>
<div id="elem-container">
<mark>window.getComputedStyle & .getPropertyValue("font-size");</mark><br/>
<button type="button" onclick="getTheStyle()">Return font-size</button>
</div>
<div id="output"></div>

liens de référence :

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle