Convert non-pixel css value to px

Question

As some measurement parameters in css are not always in px values, how can be such non-pixel value converted to px ?

Let's have

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

and let's say that the value of such x variable is 1.2em or some other string that contains not just number, but also measurement type information ( px , em , pt , cm , in , ...).

What is all-browser solution to convert such string into integer , having results in px ?

Answer 1

You can use the built-in method getComputedStyle which will interpolate any non- px value into pixels. For example:

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

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

From there you can convert into an integer.

Example JsBin and MDN Documentation .

Answer 2

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