Как я могу получить размер шрифта элемента с помощью jQuery?

Question

Как я могу получить фактический размер шрифта элемента # t1? Это явно 26px, но во всех браузерах я получаю 16px.

<div class="editor">Hello <span id="t1">my</span><br>dear <span id="t2">world</span></div> 

<button id="test">TEST</button> 

<style> 
.editor 
{ 
    font-size: 16px; 
} 
.editor:first-line 
{ 
    font-size: 26px; 
} 
</style> 

<script> 
$('#test').click(function() 
{ 
    alert($('#t1').css('font-size') + ' vs ' + $('#t2').css('font-size'));  
}); 
</script> 

Demo on JS Fiddle

Answer 1

вы должны писать в своем стиле .editor {размер шрифта: 16px;} Эта строка установить размер шрифта для всех его дочерних теге Вот почему его всегда дают 16,

вместо .editor: first-line {font-size: 26px;} для этого использования нужно написать # t1 {font-size: 26px;}. он даст вам идеальный размер.

Answer 2

Вопрос здесь - Как получить стиль из псевдоэлемента.

var fontSize = window.getComputedStyle(
    document.querySelector('.editor'), ':first-line' 
    ).getPropertyValue('font-size'); 

http://jsfiddle.net/troythompson/mrz3uh8x/

http://davidwalsh.name/pseudo-element

How do I access style properties of pseudo-elements with jQuery?