Get CSS height of HTML DOM element in non-pixel unit, in my case inches

Question

EDIT: sorry about the inconsistencies with width and height in my question, it applies to both though.

EDIT 2: I still get an innaccurate value regardless of the zoom, doing this

$('#selector').css('width',$('#selector').css('width')); actually resizes the element.

I have a page element measured in inches. The firefox property inspector states the correct height (8.5in) but using $('selctor').css('width') it returns it in pixels ("815.66666px"). This is problematic for me.

My use case is that I am toggling the size at one point in my script, and I want to be able to set it back to its default size later. In between toggling the size, and setting back to the default, the user may have zoomed the page. Due to firefox (and I think other browsers as well) less-than-perfect unit conversions, I get different round off errors based on the zoom level. For example, changing the zoom to various levels between 25% and 300% on my page yields the following results for the css('width') on the same element:

    >>>   $('#templateDiv0').css('width')
    "815.66666px"
    >>>  $('#templateDiv0').css('width')
    "815.76666px"
    >>>  $('#templateDiv0').css('width')
    "816.33334px"
    >>>  $('#templateDiv0').css('width')
    "816.13334px"

And so when I need to reset it back to the default size later, I have no guarantee that this is the correct size. I really would like it to just return (8.5in) to me. I guess the issue is that jQuery is retrieving it in its own way, and I would want to retrieve it in the way the property inspector does, which is by looking at the style sheet directly. Is there any way to do this?

The stylesheet for the page changes often, so hardcoding the value is not a good solution for me.

Answer 1

I have 1366*768pixels on my 13inch screen so 1inch = (1366*768pixels/13)px = 80699.07px; 1px = 13/(1366*768) inches = 1/80699.07 inches

unfortunately screen size is not given by api, so if you know the screen size then you can:

var size = 13;
var width =  $('#templateDiv0');
var widthInches = width * size/(window.screen.width * window.screen.height)

Answer 2

Have you thought about storing the width of the element onReady, then when you click return to default, set the width back to the width you stored onReady.