How do I prevent jQuery Accidental Unit Conversion

Question

Let's say I have the code:

var $element = $('<div/>');
$element.css("margin-left", "2cm");
console.log($element.css("margin-left"));

Chrome gives me nothing, and Firefox gives me "75.5833px". Any ideas about how to fix/work around this? I understand that the div not in the DOM can have difficulties in retrieving what the browser interprets to be computable units, such as percentages and all... Basically what it boils down to is that I want apply styles, including shorthand styles like font, background and margin, and retrieve the styles that they can be broken into in as efficient a way as possible.

Not trying to invalidate the question, but is there any good reason you're using `cm`? — Wesley Murch, May 15 '14 at 23:46
It's purely hypothetical. I need to be able to handle anything other people throw at my app. I can take things like: font: 12cm/110% "new century schoolbook", serif; and convert them to: font-family: "'new century schoolbook', serif" font-size: "12cm" font-style: "normal" font-variant: "normal" font-weight: "400" It just breaks down when I try it with margins and padding. — AaronF, May 15 '14 at 23:57

score 0 · Answer 1 · edited May 23 '17 at 12:21

According to this:

How to access screen display’s DPI settings via javascript?

How to detect the screen DPI using JavaScript

Pixel to Centimeter?

We can assume that:

1px = 0.02645833 cm;

or

1cm = 37.795276px;

so you can convert cm to pixels using a small function that calculates this like the following:

function cmToPx(cm){
    return cm * 37.795276;
}

and use it like this:

element.css("margin-left", cmToPx(2));

Also if you want to retrieve the value of an element in centimeters, you can also use another function that does the inverse:

function pxToCm(px){
    return parseInt(px) * 0.02645833;
}

and retrieve the value like this:

pxToCm(element.css("margin-left"))

It unfortunetly retrieves a number with an error margin (actually it gets 1.98437475 when i initially use 2cm). To solve this maybe you could round the value.

I don't know why your solution doesn't work on Chrome, but at least this is a possible workaround to your problem. Wish it helps, good luck!

pd: i leave the jsfiddle: http://jsfiddle.net/79fM4/3/

he wants to retrieve value in cm units, not set value in px units — Ejaz, May 15 '14 at 23:54
It's not so much that I want to convert a bunch of values, as it is that I want a container that I stick css values in to maintain all aspects of the css model. So if I put margin: 2cm; in a container, I want it to tell me margin is 2cm, margin-left is 2cm, etc... — AaronF, May 15 '14 at 23:59

score 0 · Answer 2 · answered May 16 '14 at 14:00

Here's my jQuery-less solution:

var doc = document.implementation.createHTMLDocument("");               
doc.body.appendChild(doc.createElement("p"));
doc.getElementsByTagName("p")[0].style["margin"] = "12cm";
console.log(doc.getElementsByTagName("p")[0].style["margin"]);
console.log(doc.getElementsByTagName("p")[0].style["margin-left"]);
etc...

How do I prevent jQuery Accidental Unit Conversion

2 Answers2