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 {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

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

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

2 个答案: