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 相关文章推荐
jQuery find和children方法使用
Jan 31 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
简单的分页代码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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php发送post请求函数分享
2014/03/06 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
图片自动更新(说明)
2006/10/02 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
vue实现文件上传功能
2018/08/13 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python3 xpath和requests应用详解
2020/03/06 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
终止劳动合同协议书
2014/10/05 职场文书
交通事故协议书范文
2014/10/23 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js