JS擷取IMG圖片高寬的簡單一實例，js擷取img寬的

JS擷取IMG圖片高寬的簡單一實例，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的環境下寫，就能得到其所示高寬了}); 

也就是說，以上能夠擷取到圖片高寬的方法都要以圖片已經完全載入為前提。

好了，以我的能力就只能理解到這兒了，如有不妥之處，歡迎拍磚～～

以上這篇JS擷取IMG圖片高寬的簡單一實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。