JS获取IMG图片高宽

前段时间在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的环境下写，就能获得其所示高宽了

}); 

也就是说，以上可以获取到图片高宽的方法都要以图片已经彻底加载为前提。

 

好了，以个人能力就只能理解到这儿了，若有不妥之处，欢迎拍砖～～