如何使用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>

JS Fiddle上的演示

Answer 1

您已經按照自己的樣式編寫了文字。editor{font-size：16px;}這行代碼將其所有子標記都設置為font-size，這就是為什么它總是給出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

如何使用jQuery訪問偽元素的樣式屬性？