Get font size in HTML

Question

I need to get the source information that is configured in the HTML tag with Jquery.

I know to get the font-size just use:

css:

p {font-size: 12px;}

JS:

var tamanho = $("p").css('font-size');

The question is, how can I get the font size that is set in HTML in this way:

html {font: normal 16px / 25px 'Montserrat';}

I thought of several ways but could not find a solution. It is possible?

Jquery used: https://jsfiddle.net/wmosquini/eqs997h2/

Answer 1

With the overall function getComputedStyle:

var elemento = document.getElementById('elemento'); // ou $('#elemento')[0]
var estilos = window.getComputedStyle(elemento, null);
var tamanho = estilos.getPropertyValue('font-size');

console.log(tamanho)

html {font: normal 18px / 25px 'Montserrat';}

<p id="elemento">
sfsadas fasda sdas dasd asdas da d 
</p>

Answer 2

Equivalent to bfavaretto, but compatible for older browsers:

function getStyle(elem, prop)
{
    if (elem.currentStyle) { //IE8
        prop = prop.replace(/-([a-z])/gi, function (value) {
            return value.toLowerCase();
        });
        
        return elem.currentStyle[prop];
    } else if (window.getComputedStyle) {//Navegadores modernos
        prop = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
        
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    }
}

console.log(getStyle(document.getElementById('Teste'), 'font-size'));
console.log(getStyle(document.getElementById('Teste'), 'fontSize'));

html {font: normal 16px / 25px 'Montserrat';}

<p id="Teste">Foo bar</p>

---

Extra

Even using jQuery.css or getStyle there is a very important detail, in different browsers may occur of not returning in pixels (px), can return values like em or pt.

To remove these characters I recommend using .replace with regex and not use parseInt without checking if the value is null or something else (such as empty), because otherwise it can be a problem, do so:

tamanhoFonte = $(elemento).css('font-size'); //ou getStyle(elemento, 'font-size')
tamanhoFonte = tamanhoFonte.replace(/[a-z]/gi, ""); //Remove letras, mas mantem pontos e numeros
tamanhoFonte = tamanhoFonte ? parseInt(tamanhoFonte) : 0;

Answer 3

Likewise:

var tamanho = $("html").css('font-size');

And if you want to remove the "px" to work with the integer:

var tamanho = parseInt(tamanho.replace("px",""));