在JavaScript中，如何从像素值（例如2em或20px）获取单位（例如em或px）？

Question

我正在尝试编写一个将值作为填充输入的函数，请参见以下简化示例：

function createBlocks(container,padding) {}

我希望padding参数为任何值（em，px等）。 因此，我需要能够提取值和单位。

我可以使用以下方法提取值： var paddingVal = parseFloat(padding);

但是我不知道如何提取单位价值...

有任何想法吗？

Answer 1

您可以使用.replace()

var paddingVal = parseFloat(padding);
var Newpadding = padding.replace(paddingVal , '');
alert(Newpadding);

更清楚..可能您需要先替换空格

var paddingWithoutSpaces = padding.replace(/\s/g, '+');
var paddingVal = parseFloat(padding);
var Newpadding = padding.replace(paddingVal , '');
alert(paddingVal);
alert(Newpadding);

Answer 2

使用正则表达式 ：

 function createBlocks(padding) { var matches = padding.match(/(\\d+)(.+)/), value = parseFloat(matches[1]), unit = matches[2]; console.log('value: %d, unit: %s', value, unit); } createBlocks('3px'); // value: 3, unit: px createBlocks('12rem'); // value: 12, unit: rem 

Answer 3

这也是一个也可以使用十进制值的版本：

var getUnitValue = function (valueStr) {
    var result = {};
    result.value = parseFloat(valueStr);
    result.unit = valueStr.substr(('' + result.value).length).trim();
    return result;
};

getUnitValue('80.2 px'); // --> {value: 80.2, unit: "px"}