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

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

Например:

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

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

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

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

Просто захват элемента 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'; 

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

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

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

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

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

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

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

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

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

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

 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, чтобы определить, будет ли впоследствии изменяться шрифт любой точкой кода

  1. если элемент html имеет встроенный стиль , вы можете использовать .style.fontSize чтобы получить размер шрифта !
  2. когда элемент 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(); 
 

This is a paragraph. inline style : style="font-size:120%"

This is a H3. browser defualt value

window.getComputedStyle & .getPropertyValue("font-size");