Jak uzyskać rozmiar czcionki w HTML

Question

Czytałem tutaj pytanie, próbując uzyskać rozmiar czcionki tekstu. Odpowiedź, którą podali, polegała na uzyskaniu rozmiaru piksela za pomocą metody pomiaru. Wszystko, co chcę zrobić, to uzyskać wartość rozmiaru czcionki, więc mogę ją zmienić.

Na przykład:

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

Przykład ten nie działa, choć te dwa zrobić

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

Jedynym problemem jest to, że tylko zmienia rozmiar pewnego razu.

Answer 1

Tylko chwytając style.fontSize elementu może nie działać. Jeśli font-size jest zdefiniowany przez arkusz stylów, będzie to raportować "" (pusty ciąg znaków).

Powinieneś użyć window.getComputedStyle.

Answer 2

Wartość, którą otrzymujesz z fontSize to coś w rodzaju "12px" lub "1.5em", więc dodanie 1 do tego ciągu spowoduje "12px1" lub "1.5em1". Można wziąć rozmiar czcionki i manipulować go z:

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

Answer 3

Jeśli używasz Jquery niż poniższe rozwiązanie.

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

Mam nadzieję, że to zadziała.

Answer 4

Jeśli twój element nie ma właściwości rozmiaru czcionki, twój kod zwróci pusty ciąg. Nie jest konieczne, aby element miał właściwość rozmiaru czcionki. Element może dziedziczyć właściwości z elementów nadrzędnych.

W takim przypadku musisz znaleźć obliczony rozmiar czcionki. Wypróbuj to (nie jestem pewien co do IE)

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

console.log(computedFontSize); 

Zmienna computedFontSize powróci z jednostką rozmiaru czcionki. Może to być px, em,%. Musisz rozebrać jednostkę, aby wykonać operację arytmetyczną i przypisać nową wartość.

Answer 5

Spróbuj to byłoby zdecydowanie pomóc w ustaleniu rozmiaru czcionki

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

możemy dalej używać getter i setter, aby ustalić, czy fontsize zmienia się potem przez dowolny peice kodu

Answer 6

1. jeśli Element html ma wbudowany styl, można użyć .style.fontSize, aby uzyskać rozmiar czcionki!
2. gdy element html nie ma inline styl, trzeba za pomocą funkcji Window.getComputedStyle() uzyskać rozmiar czcionki!

Oto moje kody demonstracyjne!

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>

linki referencyjne:

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