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；这个方法，只有在标签里用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标签）也一样获取不到值，返回为空。
然后说一下第二个方法与第三个方法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>
注意，现在获取到的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="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属性去掉再测试下。
最后就是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只有在img图片完全加载出来以后才获取得到，否则会报错。
提到图片的完全加载，就解决了上次我跟LJW遇到的那个怎么都获取不到图片高度问题；
document.addEventListener("DOMContentLoaded",function(){
//原因就是当时我们的代码是在这样的环境下写的，这个时候，只是加载了img的标签，即只有DOM结构，图片还没有完全加载进来，所以获取到的值都是0，但如果在window.onloaded的环境下写，就能得到其所示高宽了
});
也就是说，以上能够获取到图片高宽的方法都要以图片已经完全加载为前提。
好了，以我的能力就只能理解到这儿了，如有不妥之处，欢迎拍砖～～
以上这篇JS获取IMG图片高宽的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下2014-11-11
JavaScript中replace函数方法是返回根据正则表达式进行文字替换后的字符串的复制。使用方法:其中stringObj是必选项。要执行该替换的 String 对象或字符串文字。2015-04-04
window.addEventListener是JavaScript中用于添加事件监听器的方法,允许在发生特定事件时执行函数,本文给大家介绍js window.addEventListener 是什么,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要为大家详细介绍了基于JavaScript实现轮播图原理及示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
window.open被浏览器拦截导致页面无法弹出，a标签的弹出就不会被浏览器拦截，下面有个不错的示例，大家可以学习下2014-04-04
这篇文章主要为大家详细介绍了纯js实现最简单的文件上传功能，后台使用MultipartFile，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要为大家详细介绍了javascript实现贪吃蛇思路小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了Bootstrap布局之栅格系统，小编对Bootstrap栅格系统（布局）也很陌生，特分享整理这篇文章，感兴趣的小伙伴们可以参考一下2016-06-06
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序，没有实现人机对战，五子棋棋盘落子点对应的二维数组，具体的实现算法如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
新增加的内容是如何将div的scrollbar自动移动最下面
在做动态增长的div时,一般都是将内容append到div的最下面,但这会带来一个问题,那就是新增加的内容会被遮在最下面,具体实现如下,感兴趣的朋友可以参考下2014-01-01
最新评论