一、上一文记录了JS中网页、屏幕中的各种宽高的辨析，这一节主要记录JS中的获取图片各种高宽方面的不同，摘录笔记仅供学习参考所用。
1、可以获取图片高宽的方法有：
onload后在打印;
obj.style.width(height);
obj.offsetWidth(offsetHeight);
obj.clientWidth(clientHeight);
getComputedStyle 与 currentStyle;
obj.naturalWidth(naturalHeight) ；
JQ获取；
获取图片路径(src)的方法；
2、方法详解：
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
- // 图片地址 后面加时间戳是为了避免缓存
var img_url = ‘/placea/placeb/**.jpg?’+Date.parse(new Date());
// 创建图片对象
var img = new Image();
// 改变图片的地址
img.src = img_url;
// 加载完成执行
img.onload = function(){
// 打印输出
alert(‘width:’+img.width+’,height:’+img.height);
};
通过onload就能获取到图片的宽高了，但onload大一点的图通常都比较慢，此方法获取宽高不划算。
- obj.style.width：只有在标签里用style属性写进了width的大小，才可以获取到值，否则只返回的为空。注意：在引入的样式表中添加width值（不管是link引入还是html页面中使用style标签）也一样获取不到值，返回为空。
- obj.offsetWidth(offsetHeight);obj.clientWidth(clientHeight);这俩方法如果标签没有设置padding值及border值，那么它们两个获取到的值是一样的。但很多情况下都不是这样的，其实offsetWidth得到的是width值+padding值+border值，clientWidth得到的是width值+padding值。
- getComputedStyle；currentStyle；这俩是处理兼容性的两个方法，获取到的值都是图片在屏幕上显示的仅仅是图片的高宽值，不会获取到img标签的padding及border值；但其中getComputedStyle适用于
Firefox/IE9/Safari/Chrome/Opera浏览器，currentStyle适用于IE6/7/8。但是如果img标签即使没有设置style属性也没有引入样式表，那么只有getComputedStyle能获取到值，即为图片本身高宽值，currentStyle则返回auto。 - obj.naturalWidth(naturalHeight)方法，这是HTML5里新添加的一个获取元素高宽的方法，但只适用于
Firefox/IE9/Safari/Chrome/Opera浏览器。需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到，否则会报错。 - JQ获取图片宽高：假设图片是<img />，图片的宽度为width，高度为height
var width = $(“img”).width();
var height = $(“img”).height();
- 获取图片路径(src)的方法：① 通过获取图片img节点的src属性<img id=’test’ src=/upload/kook/big/b78504.png alt=JavaScript中获取图片各种高宽详解>