下面小编就为大家带来一篇 JS 获取 IMG 图片高宽的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
前段时间在 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 遇到的那个怎么都获取不到图片高度问题;
也就是说,以上能够获取到图片高宽的方法都要以图片已经完全加载为前提。
好了,以我的能力就只能理解到这儿了,如有不妥之处,欢迎拍砖~~
以上这篇 JS 获取 IMG 图片高宽的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0225/265699.html