jQuery.px v1.0.1

Measure an amount of CSS3 units in pixels, relative to a specified context if available.
Based on a plug-in by Filament Group.

Demo: http://blog.vanderlee.com/demo/px
Source: https://github.com/vanderlee/px




  • context (optional)
    The DOM tree node in which to measure. Some units like ’em’ and ‘%’ are relative to the current font size.
    If not specified, ‘body’ will be used for units that require a context.
  • size (optional)
    A number and CSS3 unit or constant that should be measured.
    The number can be integer or floating point and may be preceded by a sign (-/+).
    Both the number and unit/constant are optional; number will default to ‘1’, unit will default to ’em’.
    The unit can be any of the following:
    • px, in, cm, mm, pt, pc (no context)
    • em, ex, rem (uses context)
    • vw, vh, vm (no context)
    • vd (no context, not a CSS3 unit; hypothenuse of vw and vh)
    • thin, thick (border widths)
    • border-thin, border-medium, border-thick (alternative names for border widths, including medium size)
    • % (relative to current font-size, uses context)
    • xx-small, x-small, small, mediumlarge, x-large, xx-large (font-size names, no context)
    • smaller, larger (relative font-size names, uses context)


  • The measured size in pixel units.
    If the unit is specified but not recognized, an error will be thrown.


$.px(); // returns the current font-size (1em) set in <body>, measured in pixels.
$.px(‘thin’); // returns the "thin" border-width, measured in pixels.
$.px(‘small’); // returns the "small" font-size. measured in pixels.
$.px(‘2in’); // returns the number of pixels in 2 inches.
$.px(‘200%’); // returns the number of pixels in a font-size 200% the size of the font in <body>.
$(‘#here’).px(‘200%’); // … same as above, but relative to font-size in the tag with id="here".
$(‘#here’).px(‘in’); // returns the number of pixels in an inch. The context is ignored.

Leave a Reply