如何使用 jQuery 获取元素的字体大小？答案

【问题标题】：How can I get an element's font size with jQuery?如何使用 jQuery 获取元素的字体大小？
【发布时间】：2015-05-24 17:07:48
【问题描述】：

如何获得#t1 元素的实际字体大小？显然是 26 像素，但在所有浏览器中我都得到 16 像素。

<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

【问题讨论】：

这应该可以帮助你api.jquery.com/css

标签： javascript jquery html font-size

【解决方案1】：

你写出了你的风格 .editor{font-size: 16px;} 这一行将 font-size 设置为其所有子标签，这就是为什么它总是给出 16，

代替.editor:first-line{font-size: 26px;}这个使用需要写#t1{font-size: 26px;}。它会给你完美的尺寸..

【讨论】：

但问题是：我无法更改 CSS 和 HTML。所有浏览器都以 26px 呈现 .editor 元素的第一行，但返回 16px。
好吧..如果你只想设置大小，那么你可以写简单的 $('#t1').css('font-size','26px');与 t2 相同
谢谢，但这在这里无济于事。我的网站的访问者可以将元素#t1 放置在 .editor 中的任何位置（使用 Javascript）。然后我需要能够知道元素的字体大小。

【解决方案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?

【讨论】：

不完全是。我只想获得#t1 元素的字体大小。它可以在 DOM 中的任何位置。如果访问者将其移动到 .editor 的第二行怎么办？我将不得不添加一些对此类情况的特殊处理。似乎所有的浏览器都是错误的，没有复杂的技巧就无法获得元素的真实字体大小。
为什么要使用第一线？为什么需要检索伪元素的样式？