3

Estou precisando de pegar as informações da fonte que é configurado na tag do HTML com o JQuery.

Eu sei que para pegar o tamanho do font-size é só utilizar:

css:

p {font-size: 12px;}

JS:

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

A questão é, como posso pegar o tamanho da fonte que está configurado no HTML desta forma:

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

Pensei em várias formas mas não consegui encontrar uma solução. É possível?

JQuery utilizado: https://jsfiddle.net/wmosquini/eqs997h2/

2
  • 2
    Você quer pegar "literalmente": 16px / 25px ou quer pegar o valor "compensado"?
    – Syzoth
    Commented 6/10/2017 às 18:52
  • 2
    Então, quero pegar apenas o 16px, que é o tamanho da fonte Commented 6/10/2017 às 18:55

3 Respostas 3

7

Com a função global 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>

6

Equivalente ao do bfavaretto, mas com compatibilidade para navegadores antigos:

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

Mesmo usando jQuery.css ou getStyle existe um detalhe muito importante, em diferentes navegadores pode ocorrer de não retornar em pixels (px), pode retornar valores como em ou pt.

Para remover estes caracteres recomendo usar .replace com e não usar parseInt sem checar se o valor é null ou outra coisa (como vazio), pois senão pode dar problema, faça assim:

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;
11
  • Então Guilherme, o Wictor passou, funcionou, mas apenas uma única execução, anexei o link do exemplo na pergunta, consegue identificar a questão? jsfiddle.net/wmosquini/eqs997h2 Commented 6/10/2017 às 19:05
  • @WendellMosquiniPozzatti estou olhando
    – Syzoth
    Commented 6/10/2017 às 19:06
  • Descobri, era problema no meu if... Removi e funcionou :) Obrigado pela ajuda Commented 6/10/2017 às 19:06
  • @WendellMosquiniPozzatti está dando o erro: "JQuery is not defined", não tenho como testar.
    – Syzoth
    Commented 6/10/2017 às 19:07
  • 1
    @WendellMosquiniPozzatti editei a resposta, veja a parte que escrevi "extra"
    – Syzoth
    Commented 6/10/2017 às 20:02
5

Da mesma forma:

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

E se quiser remover o "px" para trabalhar com o número inteiro:

var tamanho = parseInt(tamanho.replace("px",""));
2
  • 2
    É, com jQuery realmente esse é o caminho mais simples. Internamente, ele usa o getComputedStyle.
    – bfavaretto
    Commented 6/10/2017 às 18:51
  • 1
    Wictor, funcionou perfeitamente :) Commented 6/10/2017 às 19:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .