javascript - 将非像素 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"

从那里您可以转换为整数。

示例 JsBin和MDN 文档。

Answer 2

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