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


Posted in Javascript onMay 17, 2016

前段时间在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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
简单的分页代码js实现
May 17 #Javascript
Js获取图片原始宽高的实现代码
May 17 #Javascript
创建一个类Person的简单实例
May 17 #Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 #Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
You might like
PHP邮件专题
2006/10/09 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python方向键控制上下左右代码
2018/01/20 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年团委工作总结
2014/11/13 职场文书
市级三好学生评语
2014/12/29 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python