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进行拖拽
Jul 20 Javascript
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
自己的js工具 Cookie 封装
Aug 21 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
js实现模拟购物商城案例
May 18 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
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
delegate与普通函数的区别
2014/01/22 面试题
自我评价优秀范文分享
2013/11/30 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2015年司法局工作总结
2015/05/22 职场文书
举起手来观后感
2015/06/09 职场文书
学前班教学反思
2016/02/24 职场文书
element多个表单校验的实现
2021/05/27 Javascript
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL