JS获取IMG图片高宽的简单实例

<img style="width:400px" src="/UploadFiles/2021-04-02/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">

以上这个方法只适应用标签的style属性里添加width值，在引入的样式表中添加width值（不管是link引入还是html页面中使用style标签）也一样获取不到值，返回为空。 
然后说一下第二个方法与第三个方法obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight);一般情况下，如果标签没有设置padding值及border值，那么它们两个获取到的值是一样的。但很多情况下都不是这样的，其实offsetWidth得到的是width值+padding值+border值，clientWidth得到的是width值+padding值，看下面的demo:


<style>
img{ padding:20px;border:1px solid red;}
</style>
<img style="width:400px" src="/UploadFiles/2021-04-02/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">

注意，现在获取到的img标签的宽，是在img标签里添加的style=”width:400px” 。如果去掉这一属性值，那么上面demo里的imgOffsetWidth与imgClientWidth返回的值就是图片本身的高宽值。可以偿试下。 
另处，getComputedStyle 与 currentStyle是处理兼容性的两个方法，获取到的值都是图片在屏幕上显示的仅仅图片的高宽值，不会获取到img标签的padding及border值；但其中getComputedStyle适用于Firefox/IE9/Safari/Chrome/Opera浏览器，currentStyle适用于IE6/7/8。但是如果img标签即使没有设置style属性也没有引入样式表，那么只有getComputedStyle能获取到值，即为图片本身高宽值，currentStyle则返回auto。下面有一个demo：


<img style="width: 400px;" src="/UploadFiles/2021-04-02/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">

可以把img标签里的style属性去掉再测试下。 
最后就是obj.naturalWidth(naturalHeight)方法，这是HTML5里新添加的一个获取元素高宽的方法，但只适用于Firefox/IE9/Safari/Chrome/Opera浏览器。下面有一个适用于各个浏览器的demo：


<img style="width: 400px;" src="/UploadFiles/2021-04-02/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">

需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到，否则会报错。
提到图片的完全加载，就解决了上次我跟LJW遇到的那个怎么都获取不到图片高度问题； 


document.addEventListener("DOMContentLoaded",function(){

    //原因就是当时我们的代码是在这样的环境下写的，这个时候，只是加载了img的标签，即只有DOM结构，图片还没有完全加载进来，所以获取到的值都是0，但如果在window.onloaded的环境下写，就能得到其所示高宽了

}); 


也就是说，以上能够获取到图片高宽的方法都要以图片已经完全加载为前提。
好了，以我的能力就只能理解到这儿了，如有不妥之处，欢迎拍砖～～
以上这篇JS获取IMG图片高宽的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

            
            上一篇：javascript css红色经典选项卡效果实现代码

            下一篇：简单的分页代码js实现