Come ottenere la dimensione del carattere in HTML

Question

Stavo leggendo una domanda qui cercando di ottenere la dimensione del carattere di un testo. La risposta che hanno dato è stata quella di ottenere le dimensioni dei pixel usando un metodo di misura. Tutto quello che voglio essere in grado di fare è ottenere il valore della dimensione del carattere in modo che io possa cambiarlo.

Ad esempio:

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

Questo esempio non funziona anche se questi due fanno

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

L'unico problema è che cambia solo la dimensione una volta.

Answer 1

Basta afferrare il style.fontSize di un elemento non può funzionare. Se lo font-size è definito da un foglio di stile, questo segnalerà "" (stringa vuota).

È necessario utilizzare 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

Il valore che si ottiene da fontSize è qualcosa come "12px" o "1.5em", quindi l'aggiunta di 1 a quella stringa risulterà in "12px1" o "1.5em1". Si può prendere la dimensione del carattere e manipolare con:

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

Answer 3

Se si utilizza Jquery di quanto segue è la soluzione.

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

Spero che funzioni.

Answer 4

Se il proprio elemento non ha una proprietà di tipo carattere, il codice restituirà una stringa vuota. Non è necessario che il tuo elemento abbia una proprietà font-size. L'elemento può ereditare le proprietà dagli elementi padre.

In questo caso è necessario trovare la dimensione del carattere calcolata. Prova questo (non è sicuro su IE)

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

console.log(computedFontSize); 

Il computedFontSize variabile tornerà con l'unità di dimensione del carattere. Può essere px, em,%. È necessario rimuovere l'unità per eseguire un'operazione aritmetica e assegnare il nuovo valore.

Answer 5

Prova questo sarebbe sicuramente vi aiuterà a determinare la dimensione del carattere

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

possiamo utilizzare ulteriormente getter e setter per determinare se fontsize viene modificato in seguito da qualsiasi pezzo di codice

Answer 6

1. se il elemento HTML ha inline style, è possibile utilizzare .style.fontSize per ottenere il dimensione carattere!
2. quando l'elemento html non lo fa ha stile in linea, è necessario utilizzare la funzione Window.getComputedStyle() per ottenere il font-size!

ecco i miei codici demo!

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}`); 
 
\t 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>

link di riferimento:

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