如何防止jQuery意外单位转换

时间:2014-05-15 23:19:18

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

我们说我有代码:

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

Chrome没有给我任何东西,Firefox给了我&#34; 75.5833px&#34;。关于如何解决/解决这个问题的任何想法?我知道不在DOM中的div可能难以检索浏览器解释为可计算单位的内容,例如百分比和所有......基本上它归结为我想要应用样式,包括字体等简写样式,背景和边距,并以尽可能有效的方式检索它们可以分解的样式。

2 个答案:

答案 0 :(得分:0)

根据这个:

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/

答案 1 :(得分:0)

这是我的无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...