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

前端之家收集整理的这篇文章主要介绍了JS获取IMG图片高宽的简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前段时间在LJW写的touchslider.js轮播代码添加自适应屏幕大小的功能时,遇到一个问题。不管用什么样的方法都无法获取img标签的高宽,最后只有给图片定一个高宽的比例值;趁今天有空我就写了几个demo测试了下,找了下原因;且听我细细说来,如有哪里说的不对的,欢迎拍砖~~~

首先获取高宽的方法具我所知有:

为了叙述简单,这里仅为width为例。

先说第一个方法:obj.style.width;这个方法,只有在标签里用style属性写进了width的大小,才可以获取到值,否则只返回的为空。看下面的demo:

<div class="jb51code">
<pre class="brush:js;">
<img style="width:400px" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658"&gt;

以上这个方法只适应用标签的style属性添加width值,在引入的样式表中添加width值(不管是link引入还是html页面中使用style标签)也一样获取不到值,返回为空。

然后说一下第二个方法与第三个方法obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight);一般情况下,如果标签没有设置padding值及border值,那么它们两个获取到的值是一样的。但很多情况下都不是这样的,其实offsetWidth得到的是width值+padding值+border值,clientWidth得到的是width值+padding值,看下面的demo:

img{ padding:20px;border:1px solid red;} var img = document.getElementsByTagName('img')[0],imgOffsetWidth = img.offsetWidth,//442px imgClientWidth = img.clientWidth; //440px;

注意,现在获取到的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:

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'));

可以把img标签里的style属性去掉再测试下。

最后就是obj.naturalWidth(naturalHeight)方法,这是HTML5里新添加的一个获取元素高宽的方法,但只适用于Firefox/IE9/Safari/Chrome/Opera浏览器。下面有一个适用于各个浏览器的demo:

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); });

需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到,否则会报错。

提到图片的完全加载,就解决了上次我跟LJW遇到的那个怎么都获取不到图片高度问题;

//原因就是当时我们的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>是在这样的环境下写的,这个时候,只是加载了img的<a href="/tag/biaoqian/" target="_blank" class="keywords">标签</a>,即只有DOM结构,<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>还没有完全加载进来,所以<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>到的值都是0,但如果在window.onloaded的环境下写,就能得到其所示高宽了

});

也就是说,以上能够获取图片高宽的方法都要以图片已经完全加载为前提。

好了,以我的能力就只能理解到这儿了,如有不妥之处,欢迎拍砖~~

以上这篇JS获取IMG图片高宽的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章