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 相关文章推荐
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
详解Vue.directive 自定义指令
Mar 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
javascript自定义的addClass()方法
2014/05/28 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
js实现星星打分效果
2020/07/05 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python之生成多层json结构的实现
2020/02/27 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
创业计划书撰写原则
2014/01/25 职场文书
《社戏》教学反思
2014/04/15 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
奖学金感谢信
2015/01/21 职场文书
表扬信格式模板
2015/05/05 职场文书
歌舞青春观后感
2015/06/10 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS