在浏览器缩放时查找任何 DOM 元素的实际高度

Question

有什么办法可以找到在 DOM 上呈现的元素的高度。

即使我放大/缩小，它也应该给我元素的实际高度。 目前我用过：

HTML：

<div >
    <span><img src="Desert.jpg" style="border:none;width:100px" id="imgdiv"/></span>
    <br/>
    <input type="button" id="heightcalc" value="Find Height" />
</div>

jQuery：

$('#heightcalc').click(function(){
    alert($('#imgdiv').height());
});

现在使用 100% Zoom 时图像的高度为 75。使用 200%/300%/400% Zoom 时高度相同，即 75。我的要求是每当我增加 Zoom 时高度也应该改变。 有什么办法可以找到图像的相对高度。 我在 IE9、Chrome/Firefox 中试过这个——结果是一样的。

另外，我确实尝试过使用 clientHeight、offsetHeight、outerHeight，但没有成功！

任何帮助是极大的赞赏。

感谢 Anirban

Answer 1

我使用以下计算所有浏览器的缩放效果：

https://github.com/yonran/detect-zoom

通过这个可以得到倍增因子，然后将这个因子乘以元素的实际高度。

这是代码：请注意我正在为我们的应用程序使用 require js。

require(["Widgets/detectzoom"], function (detectZoom) {
                zoom = detectZoom.ratios();
            });

            var heightofeachNode = ($("#dmcontent  ul li a span").eq(0).height()) * zoom.devicePxPerCssPx;
            self.pageSize = Math.round(($("#dmcontent").height()) / heightofeachNode) + 20 ;//20 - Its is the offset value

我已经在所有浏览器中测试过 [IE9, Chrome18.0, FF 11.0]

希望这可以帮助。

阿尼班