Question

我正在尝试获取特定元素的边框宽度。通过简单地从当前计算的元素样式中读取，获得边框宽度样式设置非常简单：

var styles = (
    document.defaultView && document.defaultView.getComputedStyle ?
    document.defaultView.getComputedStyle(de, null) :
    de.currentStyle
);

通过以下方式读取特定的边界值非常简单：

var top = styles.borderTopWidth;
var value = parseFloat(top);

这一切都很好和花花公子（只要你不使用IE ），我可以在value变量中获得顶部边框宽度。但是，只有当边框宽度设置为像素时，此数字才与像素相关。如果不是（例如em）而不是value具有该特定维度的数量。

我必须回答这两个问题中的任何一个：

如何始终以像素为单位获得边框宽度？

如何计算不同单位为像素？

实施例

我已准备好jsFiddle example，您可以在其中查看DOM和jQuery报告的各种维度。在不同的浏览器中运行它，您将看到IE中的差异。 Crome中的所有dimansion都是整数值，而Firefox在浮点数中计算边距和填充，而边界是整数。

BTW：边距，边框和填充都设置为 2mm 。

Answer 1

大多数库为您解决此问题，例如YUI3。如果你不想使用这些库，那么至少你可以达到他们如何做到这一点;）

http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html

其中包含的Awnser。

Answer 2

通常可以使用element.offsetWidth和element.offsetHeight获取计算的像素大小。如果您想支持一系列浏览器，这有点敏感。在这种情况下，请使用库。例如，使用jQuery，你可以得到像这样的保证像素尺寸：jQuery（“＃theID”）。width（）。

将HTML元素非px维度转换为px（IE问题）

实施例

2 个答案: