jQuery.px

jQuery.px

While working on a jQuery project, I needed to know the width of the CSS border sizes “thin”, “medium” and “thick”. Since these depend on the browser you’re using, the only way to know for sure is measuring it.

Some Googling led me to Filament groups’ simple method of measuring the size of an em unit (here). Their method got me inspired, and pretty soon I had functions to measure the named border-widths as well as a number of other CSS unit measurements. A bit more work evolved it into what is now known as “jQuery.px”.

Go to the project page for demo and download: jQuery.px

It basically returns the size in pixels of any CSS3 unit, border-width name or font-size name you give it, based on the context (a DOM node). For example; want to know how many pixels one inch is (according to the browser)?

[js]var pixels_in_an_inch = $.jq(‘in’);[/js]

. It’s that simple.

By the way, I hope to soon publish the plugin which triggered the creation of this one. It still needs some more work though.