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 replace方法与正则表达式
Feb 19 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
简单的Vue SSR的示例代码
Jan 12 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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常用的缓存技术汇总
2014/05/05 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python中assert用法实例分析
2015/04/30 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
scrapy-splash简单使用详解
2021/02/21 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
2015年百日安全活动总结
2015/03/26 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript