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 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
js遍历td tr等html元素
Dec 13 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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防注
2007/01/15 PHP
php adodb连接不同数据库
2009/03/19 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python中dict使用方法详解
2019/07/17 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Python reques接口测试框架实现代码
2020/07/28 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python简单实现插入排序实例代码
2020/12/16 Python
东方电视购物:东方CJ
2016/10/12 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
信电学院毕业生自荐书
2014/05/24 职场文书
化学教育专业自荐信
2014/07/04 职场文书
储备店长岗位职责
2015/04/14 职场文书
会计实训总结范文
2015/08/03 职场文书
入党申请书格式
2019/06/20 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers