Как получить размер шрифта в HTML

Я читал вопрос, пытаясь получить размер шрифта для текста. Ответ, который они дали, заключался в том, чтобы получить размер пикселя с использованием метода измерения. Все, что я хочу сделать, это получить значение размера шрифта, чтобы я мог его изменить.

Например:

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

Этот пример не работает, хотя эти два делают

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

Единственная проблема заключается в том, что он только один раз меняет размер.

Ответ 1

Просто захват элемента style.fontSize элемента может не работать. Если font-size определяется таблицей стилей, это будет сообщать "" (пустая строка).

Вы должны использовать 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';

Ответ 2

Если у вашего элемента нет свойства font-size, ваш код возвратит пустую строку. Не обязательно, чтобы ваш элемент имел свойство font-size. Элемент может наследовать свойства от родительских элементов.

В этом случае вам нужно найти вычисленный размер шрифта. Попробуйте это (не уверен насчет IE)

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

console.log(computedFontSize);

Переменная computedFontSize вернется с размером шрифта в единицах. Единицей может быть px, em,%. Вам нужно раздеть блок, чтобы выполнить арифметическую операцию и назначить новое значение.

Ответ 3

Значение, которое вы получаете от fontSize, похоже на "12px" или "1.5em", поэтому добавление 1 к этой строке приведет к "12px1" или "1.5em1". Вы можете взять размер шрифта и манипулировать им с помощью:

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

Ответ 4

Если вы используете JQuery, то это решение.

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

Надеюсь, что это сработает.

Ответ 5

Попробуйте это, это определенно поможет вам определить размер шрифта

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

мы можем дополнительно использовать getter и setter, чтобы определить, будет ли впоследствии изменяться fontsize любой точкой кода

Ответ 6

если элемент html имеет встроенный стиль, вы можете использовать .style.fontSize для получения размера шрифта!
когда элемент html не имеет встроенного стиля, вам нужно использовать функцию Window.getComputedStyle(), чтобы получить размер шрифта!

вот мои демо-коды!

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>