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"));

这里是fiddle。它不是返回100px而是返回100

您可以像这样提取单位：

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

fiddle

编辑：

显然，normal可以设置为＆＃34;合理的＆＃34;用户代理的值，并且是特定于字体的，规范建议它在1.0和1.2之间。所以你可能会be better off计算它的height属性。

正常

告诉用户代理将使用的值设置为＆＃34;合理的＆＃34;基于价值在元素的字体上。该值具有相同的含义＆LT; number取代。我们建议使用正常的＆＃39;正常值。介于1.0到1.2之间。计算出的值是＆＃39; normal＆＃39;。

这里有一个深入的blog post。

Answer 2

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

示例：

<div></div>

JS：

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

现在......什么数值会满足？

将措辞的CSS值转换为数字

2 个答案: