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的環境下寫，就能獲得其所示高寬了

}); 

也就是說，以上可以獲取到圖片高寬的方法都要以圖片已經徹底加載爲前提。

 

好了，以個人能力就只能理解到這兒了，若有不妥之處，歡迎拍磚～～