javascript - 将文字 CSS 值转换为数字

Question

当我调用window.getComputedStyle()一个元素并尝试获取诸如 lineHeight 之类的属性时，它可以同时具有文字值和数值，是否有一种方法或不同的函数每次都会返回一个数值？

我的line-height示例是指normal关键字。其他示例包括字体粗细和边框宽度。所有这些都使用关键字，但映射到数值。

Answer 1

如果您指的是返回值可以包含px或其他单位，则可以使用该parseInt函数：

function getTheStyle(elem,property)
{
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue(property);
    return parseInt(theCSSprop);
}

var element = document.getElementById('test');
alert(getTheStyle(element,"height"));

这是一个小提琴。而不是返回100px它返回100

您可以像这样提取单位：

var str = "100em";
var matches = str.match(/([a-z]+)$/gi);
alert(matches);

小提琴

编辑：

显然，normal可以由用户代理设置为“合理”的值，并且是特定于字体的，规范建议它在 1.0 和 1.2 之间。所以你可能会更好地计算它的height属性。

normal

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。该值与< number >的含义相同。我们建议使用 1.0 到 1.2 之间的“正常”值。计算值是“正常”。

这是一篇关于它的深入博客文章。

Answer 2

不，因为并不总是有映射。

例子：

<div></div>

JS：

alert(getComputedStyle(document.body.children[0]).width);
// alerts "auto"

现在......什么数值可以满足？