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 相关文章推荐
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
jstree的简单实例
Dec 01 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
详解Vue中watch的高级用法
May 02 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
js CSS操作方法集合
2008/10/31 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JS分页效果示例
2013/10/11 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
js实现拖拽功能
2017/03/01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python实现自动解数独小程序
2019/01/21 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
《问银河》教学反思
2014/02/19 职场文书
捐资助学倡议书
2014/04/15 职场文书
岗位说明书怎么写
2014/07/30 职场文书
信用卡收入证明范本
2015/06/12 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
php png失真的原因及解决办法
2021/10/24 PHP
python创建字典及相关管理操作
2022/04/13 Python