如何防止 jQuery 意外单位转换答案

【问题标题】：How do I prevent jQuery Accidental Unit Conversion如何防止 jQuery 意外单位转换
【发布时间】：2014-07-04 14:39:09
【问题描述】：

假设我有代码：

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

Chrome 什么也没给我，而 Firefox 给我的是“75.5833px”。关于如何解决/解决此问题的任何想法？我知道不在 DOM 中的 div 可能难以检索浏览器解释为可计算单位的内容，例如百分比和所有...基本上归结为我想要应用样式，包括字体等速记样式，背景和边距，并以尽可能高效的方式检索它们可以分解的样式。

【问题讨论】：

不是试图使问题无效，但是您使用cm 有什么好的理由吗？
纯属假设。我需要能够处理其他人扔给我的应用程序的任何东西。我可以采用以下内容：字体：12cm/110%“新世纪教科书”，衬线；并将它们转换为： font-family: "'new Century schoolbook', serif" font-size: "12cm" font-style: "normal" font-variant: "normal" font-weight: "400" 它只是坏了当我尝试使用边距和填充时。

标签： javascript jquery css cross-browser unit-conversion

【解决方案1】：

据此：

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

How to detect the screen DPI using JavaScript

Pixel to Centimeter?

我们可以假设：

1px = 0.02645833 cm;

或

1cm = 37.795276px;

因此您可以使用一个小函数将 cm 转换为像素，该函数的计算如下：

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

并像这样使用它：

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

此外，如果您想检索以厘米为单位的元素的值，您还可以使用另一个执行相反操作的函数：

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

并像这样检索值：

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

不幸的是，它检索到一个带有误差范围的数字（实际上，当我最初使用 2cm 时它得到 1.98437475）。为了解决这个问题，也许你可以四舍五入。

我不知道为什么您的解决方案无法在 Chrome 上运行，但至少这是解决您的问题的一种可能的解决方法。希望对您有所帮助，祝您好运！

pd：我离开了 jsfiddle：http://jsfiddle.net/79fM4/3/

【讨论】：

他想检索以cm为单位的值，而不是以px为单位的设置值
与其说我想转换一堆值，不如说我想要一个容器，我将 css 值放入其中以维护 css 模型的各个方面。所以如果我把margin: 2cm;在容器中，我希望它告诉我边距是 2cm，margin-left 是 2cm，等等...
基本上，我想要的是样式，而不是计算出来的样式。

【解决方案2】：

这是我的无 jQuery 解决方案：

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...

【讨论】：