将非像素css值转换为px

Question

由于css中的某些测量参数并非始终为px值，如何将此非像素值转换为px？

我们有

var x = $('#element').css('parameter');

让我们说这个x变量的值是1.2em或其他一些不仅包含数字的字符串，还包含测量类型信息（px，em ，pt，cm，in，...）。

什么是将string转换为integer的所有浏览器解决方案，结果为px？

Answer 1

您可以使用内置方法getComputedStyle，它会将任何非px值插入像素。例如：

var el = document.getElementById('foo'); // has a relative font size

console.log(el.style.fontSize); // "5em"
console.log(window.getComputedStyle(el).fontSize); // "80px"

从那里你可以转换成一个整数。

Example JsBin 和MDN Documentation。

Answer 2

$("#element").css("padding","2em")
var value = parseInt($("#element").css("font-size"));
var padding = 2*value ;
console.log(padding);