I'm studying browser DOM with Javascript and building a "system" that relies on millimeter units instead of px. I know how to set element sizes in mm, that works well with
element.style.width = "32mm"; for example.
However I am having trouble retrieving the measurements in any other units than in px. Is there a way to do this?
SIDENOTE: Is there no way to define a global default unit system for css? Would be handy to define what units to use once, and then just use plain values for elements.
Is there no way to define a global default unit system for css?
No, there isn't.
However I am having trouble retrieving the measurements in any other units than in px. Is there a way to do this?
No, there isn't.
A CSS "pixel" is effectively 1/96th of an inch, 0.26mm. So you can get the size in mm by taking the size in pixels and multiplying by 0.26.
Note, however, that that's the "reference" size of a pixel. From the link:
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).
Displays have varying densities, but usually map the CSS pixel as though it were 1/96th of an inch.
This answer to the original question (didn't realize this was a duplicate when I answered; I should have) has a wonderfully-direct approach: Define an element in mm, and then get its size in pixels, and you know the conversion for that device, in that orientation.
