How to Get Default Font Size in Pixels by Using JavaScript or Jquery

How can i get default font size in pixels by using JavaScript or JQuery?

There are a couple of situations this can be useful-

function getDefaultFontSize(pa){
 pa= pa || document.body;
 var who= document.createElement('div');

 who.style.cssText='display:inline-block; padding:0; line-height:1; position:absolute; visibility:hidden; font-size:1em';

 who.appendChild(document.createTextNode('M'));
 pa.appendChild(who);
 var fs= [who.offsetWidth, who.offsetHeight];
 pa.removeChild(who);
 return fs;
}

alert(getDefaultFontSize())

How To Get Font Size in HTML

Just grabbing the style.fontSize of an element may not work. If the font-size is defined by a stylesheet, this will report "" (empty string).

You should use window.getComputedStyle.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

Converting em to px in Javascript (and getting default font size)

Edit: No, there isn't.

To get the rendered font size of a given element, without affecting the DOM:

parseFloat(getComputedStyle(parentElement).fontSize);

This is based off the answer to this question.

---

Edit:

In IE, you would have to use parentElement.currentStyle["fontSize"], but this is not guaranteed to convert the size to px. So that's out.

Furthermore, this snippet won't get you the default font size of the element, but rather its actual font size, which is important if it has actually got a class and a style associated with it. In other words, if the element's font size is 2em, you'll get the number of pixels in 2 ems. Unless the font size is specified inline, you won't be able to get the conversion ratio right.

Detect font size in pixels using jQuery

http://jsfiddle.net/g9uKq/

I made you a fiddle just to be clear.

var size = $("h1").css('font-size');

get jquery to return font-size in points

Try this:

var fontSize = ...
var points = parseInt(fontSize) * 72 / 96

How can I get the font size of an element as it was set by css

This jQuery plugin looks like it will do the trick:

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

Github: jQuery-Pixel-Em-Converter

jQuery/JS – Get font-size in unit set in CSS (vw units)

Once you have value in px, multiply it by 100/($(window).width())

For example(in your case):

$('.textarea').css('font-size')*(100/($(window).width()))

Please let me know, if it works

Get actual body font size using jQuery

Use this:

  $("body").css('font-size')

---

Related Topics