在前端开发中，我们经常需要获取图像的尺寸信息。在本文中，我将介绍如何使用 JavaScript 获取图像的高度。
使用自然高度属性
JavaScript 提供了 naturalHeight 属性来获取图像的原始高度。这个属性返回图像的实际像素高度，不受 CSS 样式的影响。
以下是一个获取图像自然高度的示例代码：
----- --- - ------------------------------------ ----- ------ - ------------------ ------------------ ------- --------------
等待图像加载完成再获取高度
如果图像还没有加载完成，使用 naturalHeight 属性将返回 0。为了避免这种情况，我们可以等待图像加载完成后再获取高度。
以下是一个等待图像加载完毕再获取高度的示例代码：
----- --- - ------------------------------------ ---------------------------- -- -- - ----- ------ - ------------------ ------------------ ------- -------------- ---
通过创建图像对象获取高度
除了使用 document.getElementById 获取图像元素之外，我们还可以使用 new Image() 创建一个图像对象。这个方法允许我们在图像加载之前设置相关属性，比如 src、onload 等。
以下是一个使用图像对象获取高度的示例代码：
----- --- - --- -------- ------- - ----------------------------------- ---------------------------- -- -- - ----- ------ - ------------------ ------------------ ------- -------------- --- -------------------------------
总结
在本文中，我们介绍了三种方法来获取图像的高度：使用 naturalHeight 属性、等待图像加载完成再获取高度和使用图像对象。
无论哪种方法，都需要注意图像是否已经加载完成。如果图像没有加载完成，将无法准确地获取其高度信息。因此，在获取图像高度之前，最好等待图像加载完成。
希望通过本文的学习，您能够更加熟练地处理图像尺寸相关的任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29808