javascript - 在 Internet Explorer 中获取没有填充的元素的宽度

Question

我想让我网站上的图片适合其包含元素的大小，所以我有这个:

if (userHasMicrositePhoto) {
    var width = $('micrositePhotoDiv').getComputedSize().width;
    $('micrositePhoto').src = "flash/userImage.ashx?type=micrositePhoto&id=" + userId + "&width=" + width;
}

我的处理程序文件 userImage.ashx 返回 ID 给定的图像，缩放到作为参数给定的宽度。

这在 firefox、chrome 和 co 中工作正常，但在 Internet explorer 中不起作用 - 返回的图像太大。我认为这是因为 .getComputedSize().width 报告的宽度包括 Internet Explorer 中的填充大小(但在边框或边距上)，但在其他浏览器中仅返回可用区域。导致internet explorer给出的宽度太大。

我找不到任何其他可供 .getComputedSize() 访问的字段，这些字段允许我在 Internet Explorer 中找到“实际”宽度。我尝试使用 .getComputedStyle() 获取填充，这样我就可以从总宽度中减去它，但这会返回一个字符串，我将 micrositePhotoDiv 元素设置为 padding: 0.75em，所以这是行不通的。

我需要做什么才能在 Internet Explorer 中获得正确的宽度？

Answer 1

jQuery width()就是这样做的(参见 jQuery source code )。

如您所见，通常 getComputedStyle 返回以像素为单位的宽度，因此您通常可以这样做(旧 IE 除外):

var width = parseFloat(window.getComputedStyle(elem).width);