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

javascript html css font-size

66534 просмотра

6 ответа

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

Например:

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

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

Автор: Mark Walsh Источник Размещён: 12.11.2019 09:08

Ответы (6)


132 плюса

Решение

Просто захват 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';
Автор: Paul Armstrong Размещён: 04.03.2013 05:48

8 плюса

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

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

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

console.log(computedFontSize);

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

Автор: kiranvj Размещён: 04.03.2013 05:53

2 плюса

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

var fontSize = parseInt(x);
fontSize = fontSize + 1 + "px";
document.getElementById("foo").style.fontSize = fontSize;
Автор: MattDiamant Размещён: 04.03.2013 05:40

2 плюса

Если вы используете Jquery, то следующим является решение.

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

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

Автор: Umair Saleem Размещён: 04.03.2013 05:48

0 плюса

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

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

Автор: Gaurav Размещён: 01.08.2014 11:12

0 плюса

  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();
<p id="fp" style="font-size:120%">
    This is a paragraph.
    <mark>inline style : style="font-size:120%"

This is a H3. browser defualt value

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

ссылки ссылки:

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

Автор: xgqfrms Размещён: 13.02.2017 09:30
Вопросы из категории :
32x32