Get true content size

Question

I am wondering if its possible to get the size of the content ( not the div ) in javascript/jQuery. So if the box has a height of 200px but there is only one line of text, the content size would be around 12px.

Thanks for all your help

Answer 1

You may create a range of the element's text-contents and use the properties of the range:

/**
  * @param object o DOMElement
  * @return int|null boundingHeight
  **/
function fx(o)
{
  if(document.createRange)
  {
    var r = document.createRange();
        r.selectNodeContents(o);
    return r.getBoundingClientRect().height;
  }
  else
  {
    var r = document.body.createTextRange();
        r.moveToElementText(o)
    return r.boundingHeight;
  }
  return null;
}

http://jsfiddle.net/doktormolle/wArMN/

Answer 2

If you are referring the font-size, you can check it with this:

$('div').click(function()
{
    alert($(this).css('font-size'));
});

Demo.