0

How can I get the actual font-size of the #t1 element? It is obviously 26px but in all the browsers I get 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

Tom
  • 2,962
  • 3
  • 39
  • 69

2 Answers2

1

you have write in your style .editor{font-size: 16px;} This line set font-size to all its child tag thats why its always give 16,

instead of .editor:first-line{font-size: 26px;} this use need to write #t1{font-size: 26px;}. it will give you perfect size..

Nimish Mer
  • 42
  • 2
  • But the problem is: I cannot change the CSS nor the HTML. All browsers render the very first line of the .editor element in 26px but return 16px. – Tom Mar 21 '15 at 09:13
  • okay.. if u just want to set the size then u can write simple $('#t1').css('font-size','26px'); ans same for t2 – Nimish Mer Mar 21 '15 at 09:47
  • Thank you, but that won't help here. The element #t1 can be placed anywhere in the .editor by visitor of my site (using Javascript). And then I need to be able to tell the font-size of the element. – Tom Mar 21 '15 at 09:50
1

The question here is - How to get style from a pseudo element.

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?

Community
  • 1
  • 1
Troy Thompson
  • 371
  • 1
  • 6
  • Not exactly. I just want to get font-size of #t1 element. It can be anywhere in the DOM. What if the visitor moves it to the second line of .editor? I will have to add some special handling of such cases. Seems all the browsers ARE buggy and there is NO way to get real font-size of an element without complicated tricks. – Tom Mar 21 '15 at 09:25
  • Why is firstline being used? Why do you need to retrieve the style of a pseudo element? – Troy Thompson Mar 21 '15 at 09:51