下面小編就為大家?guī)?lái)一篇JS獲取IMG圖片高寬的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

前段時(shí)間在LJW寫(xiě)的touchslider.js輪播代碼里添加自適應(yīng)屏幕大小的功能時(shí)，遇到一個(gè)問(wèn)題。不管用什么樣的方法都無(wú)法獲取到IMG標(biāo)簽的高寬，最后只有給圖片定一個(gè)高寬的比例值；趁今天有空我就寫(xiě)了幾個(gè)demo測(cè)試了下，找了下原因；且聽(tīng)我細(xì)細(xì)說(shuō)來(lái)，如有哪里說(shuō)的不對(duì)的，歡迎拍磚～～～ 

首先獲取高寬的方法具我所知有：

obj.style.width(height);

obj.offsetWidth(offsetHeight);

obj.clientWidth(clientHeight);

getComputedStyle 與 currentStyle;

obj.naturalWidth(naturalHeight) 

為了敘述簡(jiǎn)單，這里僅為width為例。 

先說(shuō)第一個(gè)方法：obj.style.width；這個(gè)方法，只有在標(biāo)簽里用style屬性寫(xiě)進(jìn)了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>

以上這個(gè)方法只適應(yīng)用標(biāo)簽的style屬性里添加width值，在引入的樣式表中添加width值（不管是link引入還是html頁(yè)面中使用style標(biāo)簽）也一樣獲取不到值，返回為空。 

然后說(shuō)一下第二個(gè)方法與第三個(gè)方法obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight);一般情況下，如果標(biāo)簽沒(méi)有設(shè)置padding值及border值，那么它們兩個(gè)獲取到的值是一樣的。但很多情況下都不是這樣的，其實(shí)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>

注意，現(xiàn)在獲取到的img標(biāo)簽的寬，是在img標(biāo)簽里添加的style=”width:400px” 。如果去掉這一屬性值，那么上面demo里的imgOffsetWidth與imgClientWidth返回的值就是圖片本身的高寬值。可以償試下。 

另處，getComputedStyle 與 currentStyle是處理兼容性的兩個(gè)方法，獲取到的值都是圖片在屏幕上顯示的僅僅圖片的高寬值，不會(huì)獲取到img標(biāo)簽的padding及border值；但其中g(shù)etComputedStyle適用于Firefox/IE9/Safari/Chrome/Opera瀏覽器，currentStyle適用于IE6/7/8。但是如果img標(biāo)簽即使沒(méi)有設(shè)置style屬性也沒(méi)有引入樣式表，那么只有g(shù)etComputedStyle能獲取到值，即為圖片本身高寬值，currentStyle則返回auto。下面有一個(gè)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標(biāo)簽里的style屬性去掉再測(cè)試下。 

最后就是obj.naturalWidth(naturalHeight)方法，這是HTML5里新添加的一個(gè)獲取元素高寬的方法，但只適用于Firefox/IE9/Safari/Chrome/Opera瀏覽器。下面有一個(gè)適用于各個(gè)瀏覽器的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) { // 現(xiàn)代瀏覽器

          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圖片完全加載出來(lái)以后才獲取得到，否則會(huì)報(bào)錯(cuò)。

提到圖片的完全加載，就解決了上次我跟LJW遇到的那個(gè)怎么都獲取不到圖片高度問(wèn)題； 

document.addEventListener("DOMContentLoaded",function(){

    //原因就是當(dāng)時(shí)我們的代碼是在這樣的環(huán)境下寫(xiě)的，這個(gè)時(shí)候，只是加載了img的標(biāo)簽，即只有DOM結(jié)構(gòu)，圖片還沒(méi)有完全加載進(jìn)來(lái)，所以獲取到的值都是0，但如果在window.onloaded的環(huán)境下寫(xiě)，就能得到其所示高寬了

});

也就是說(shuō)，以上能夠獲取到圖片高寬的方法都要以圖片已經(jīng)完全加載為前提。

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

以上這篇JS獲取IMG圖片高寬的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考