web-dev-qa-db-fra.com

Comment obtenir la taille de la police en HTML

Je lisais une question ici en essayant d'obtenir la taille de la police d'un texte. La réponse qu'ils ont donnée était d'obtenir la taille en pixels à l'aide d'une méthode de mesure. Tout ce que je veux, c'est obtenir la valeur de la taille de la police pour pouvoir la changer.

Par exemple:

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

Cet exemple ne fonctionne pas bien que ces deux ne

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

Le seul problème est que cela ne change qu'une fois la taille.

javascripthtmlcssfont-size
40
Mark Walsh

Il ne suffit pas de saisir le style.fontSize d'un élément. Si le font-size est défini par une feuille de style, ceci signalera "" (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';
107
Paul Armstrong

Si votre élément n'a pas de propriété font-size, votre code renverra 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 police calculée. Essayez ceci (pas sûr de IE)

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

console.log(computedFontSize);

La variable computedFontSize retournera avec l'unité de taille de police. Il peut s'agir de px, em,%. Vous devez supprimer l'unité pour effectuer une opération arithmatique et attribuer la nouvelle valeur.

4
kiranvj

La valeur que vous obtenez de fontSize est quelque chose comme "12px" ou "1.5em", donc ajouter 1 à cette chaîne donnera "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;
2
MattDiamant

Si vous utilisez Jquery, la solution est la suivante.

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

J'espère que cela fonctionnera.

1
Umair Saleem
  1. si l'élément html a le style inline, vous pouvez utiliser le .style.fontSize pour obtenir le font-size!
  2. lorsque l'élément html n'a pas le style inline, vous devez utiliser la fonction Window.getComputedStyle() pour obtenir le font-size!

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

0
xgqfrms

Essayez ceci, il vous aiderait certainement à déterminer la taille de la police.

var elem = document.createElement('div');
var t=document.createTextNode('M')
elem.appendChild(t);
document.body.appendChild(elem);

var myfontSize = getStyle(elem,"fontSize")
alert(myfontSize)
document.body.removeChild(elem);

function getStyle(elem,prop){
if (elem.currentStyle) {
var res= elem.currentStyle.margin;
} else if (window.getComputedStyle) {
if (window.getComputedStyle.getPropertyValue){
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)}
else{var res =window.getComputedStyle(elem)[prop] };
}
return res;
}

nous pouvons en outre utiliser getter et setter pour déterminer si fontsize est modifié par la suite par un morceau de code

0
Gaurav