JavaScript 获取 IMG 图片实际高宽的多种方法解析
本文详细解析了JavaScript中获取IMG标签高宽的多种方法，包括obj.style、offsetWidth、clientWidth、getComputedStyle以及HTML5的naturalWidth。重点讨论了各方法在不同浏览器中的表现及padding/border的影响，并指出所有方法均依赖图片完全加载这一前提条件。
JS获取IMG图片高宽的简单实例
此前在LJW编写的touchslider.js轮播组件中添加屏幕自适应功能时，遇到一个难题：无论采用何种方式，均无法准确获取IMG标签的高度和宽度，最终只能强制设定图片的比例值。趁此机会，我编写了几个Demo进行测试以探究原因，现整理如下，若有疏漏欢迎指正。
获取高宽的常用方法
据我所知，获取元素高宽的方法主要有以下几种：
obj.style.width(height);
obj.offsetWidth(offsetHeight);
obj.clientWidth(clientHeight);
getComputedStyle 与 currentStyle;
obj.naturalWidth(naturalHeight)
为简化叙述，下文仅以width为例进行说明。
obj.style.width方法
首先介绍第一种方法：obj.style.width。该方法仅在HTML标签内通过style属性直接写入width值时才能获取到具体数值，否则返回空值。参考以下Demo：
<img style="width:400px" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">
<script>
var imgW = document.getElementsByTagName('img')[0].style.width;
alert(imgW); //返回值为400px，否则返回空；
</script>上述方法仅适用于在标签的style属性中直接添加width值的情况。若width值是在引入的外部样式表中定义（无论是通过link引入还是在HTML页面中使用style标签），该方法同样无法获取值，返回结果为空。
offsetWidth与clientWidth方法
接着讨论第二种与第三种方法：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="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">
<script>
var img = document.getElementsByTagName('img')[0],
imgOffsetWidth = img.offsetWidth, //442px
imgClientWidth = img.clientWidth; //440px;
</script>注意，当前Demo中获取到的img标签宽度，是因为在img标签内添加了style="width:400px"属性。若移除该属性，上述Demo中imgOffsetWidth与imgClientWidth返回的值将变为图片本身的原始高宽值，读者可自行尝试验证。
getComputedStyle与currentStyle方法
此外，getComputedStyle 与 currentStyle 是用于处理浏览器兼容性的两种方法，它们获取的是图片在屏幕上显示的实际高宽值，不包含img标签的padding及border值。其中，getComputedStyle适用于Firefox、IE9、Safari、Chrome及Opera浏览器；currentStyle则适用于IE6、IE7和IE8。然而，即使img标签未设置style属性且未引入样式表，只有getComputedStyle能获取到值（即图片本身高宽），而currentStyle则返回auto。参见以下Demo：
<img style="width: 400px;" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">
<script>
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null)[name];
}else{
return el.currentStyle[name];
}
}
var div = document.getElementsByTagName('img')[0];
alert(getStyle(div, 'width'));
</script>读者可将img标签中的style属性移除后再进行测试。
naturalWidth方法及加载前提
最后是obj.naturalWidth(naturalHeight)方法，这是HTML5新增的获取元素高宽的方式，但仅适用于Firefox、IE9、Safari、Chrome及Opera浏览器。以下提供一个适用于各浏览器的Demo：
<img style="width: 400px;" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">
<script>
document.addEventListener('DOMContentLoaded',function(){
function getImgNaturalStyle(img,callback) {
var nWidth, nHeight
if (img.naturalWidth) { // 现代浏览器
nWidth = img.naturalWidth
nHeight = img.naturalHeight
} else { // IE6/7/8
var imgae = new Image();
image.src = img.src;
image.onload = function(){
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}
var img = document.getElementsByTagName('img')[0],
imgNatural = getImgNaturalStyle(img);
alert(imgNatural);
});
</script>需要注意的是，在IE6/7/8浏览器中，image.src属性仅在图片完全加载后才能获取，否则将报错。
提及图片的完全加载，这便解决了之前我与LJW遇到的无法获取图片高度的问题：
document.addEventListener("DOMContentLoaded",function(){
//原因就是当时我们的代码是在这样的环境下写的，这个时候，只是加载了img的标签，即只有DOM结构，图片还没有完全加载进来，所以获取到的值都是0，但如果在window.onloaded的环境下写，就能得到其所示高宽了
}); 也就是说，以上所有能够获取图片高宽的方法，都必须以图片已经完全加载为前提条件。
受限于个人能力，理解至此，若有不当之处，欢迎批评指正。
以上关于JS获取IMG图片高宽的简单实例即为小编分享的全部内容，希望能对大家有所帮助，也希望大家多多支持本站。
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33