欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS獲取IMG圖片高寬的簡單實例

 更新時間:2016年05月17日 16:08:21   投稿:jingxian  
下面小編就為大家?guī)硪黄狫S獲取IMG圖片高寬的簡單實例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

前段時間在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的大小,才可以獲取到值,否則只返回的為空??聪旅娴膁emo:

<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);一般情況下,如果標簽沒有設(shè)置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>

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

另處,getComputedStyle 與 currentStyle是處理兼容性的兩個方法,獲取到的值都是圖片在屏幕上顯示的僅僅圖片的高寬值,不會獲取到img標簽的padding及border值;但其中g(shù)etComputedStyle適用于Firefox/IE9/Safari/Chrome/Opera瀏覽器,currentStyle適用于IE6/7/8。但是如果img標簽即使沒有設(shè)置style屬性也沒有引入樣式表,那么只有g(shù)etComputedStyle能獲取到值,即為圖片本身高寬值,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) { // 現(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圖片完全加載出來以后才獲取得到,否則會報錯。

提到圖片的完全加載,就解決了上次我跟LJW遇到的那個怎么都獲取不到圖片高度問題; 

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

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

}); 

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

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

以上這篇JS獲取IMG圖片高寬的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 原生JS實現(xiàn)多條件篩選

    原生JS實現(xiàn)多條件篩選

    這篇文章主要為大家詳細介紹了原生JS實現(xiàn)多條件篩選,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • 解決layui表格的表頭不滾動的問題

    解決layui表格的表頭不滾動的問題

    今天小編就為大家分享一篇解決layui表格的表頭不滾動的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 本地圖片預覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗總結(jié)

    本地圖片預覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗總結(jié)

    遇到的本地圖片預覽的需求,IE6下可以直接從file的value獲取圖片路徑來顯示預覽,IE7和IE8下通過select獲取file的圖片路徑,再用濾鏡來顯示預覽,至于FireFox祥看本文吧,希望可以幫助到你
    2013-03-03
  • Javascript中內(nèi)建函數(shù)reduce的應用詳解

    Javascript中內(nèi)建函數(shù)reduce的應用詳解

    內(nèi)建函數(shù)其實就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時的工作中,相信大家使用的場景并不多,這篇文章給大家詳細介紹了函數(shù)reduce的應用以及多重疊加,有需要的朋友們可以參考借鑒,下面來一起看看吧。
    2016-10-10
  • 外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法總結(jié)

    外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法總結(jié)

    最近在研究微信小程序的云開發(fā)功能,下面這篇文章主要給大家介紹了關(guān)于外部web端訪問微信小程序云數(shù)據(jù)庫的三種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-04-04
  • JavaScript實現(xiàn)簡單獲取本地圖片主色調(diào)

    JavaScript實現(xiàn)簡單獲取本地圖片主色調(diào)

    想象一個場景,就是如何根據(jù)一張圖片大概提取出它的主色調(diào)呢?獲取主色調(diào)后,可能會用來設(shè)置某些背景顏色,這里,利用?JS?簡單獲取本地圖片主色調(diào),希望對大家有所幫助
    2023-03-03
  • Bootstrap table兩種分頁示例

    Bootstrap table兩種分頁示例

    這篇文章主要為大家詳細介紹了Bootstrap table兩種分頁示例,服務(wù)器端分頁和客戶端分頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JavaScript/jQuery 表單美化插件小結(jié)

    JavaScript/jQuery 表單美化插件小結(jié)

    用過一些表單美化的工具,覺得不錯,特地分享一下
    2012-02-02
  • javascript實現(xiàn)詳細時間提醒信息效果的方法

    javascript實現(xiàn)詳細時間提醒信息效果的方法

    這篇文章主要介紹了javascript實現(xiàn)詳細時間提醒信息效果的方法,涉及javascript操作時間的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • 微信小程序request請求封裝,驗簽代碼實例

    微信小程序request請求封裝,驗簽代碼實例

    這篇文章主要介紹了微信小程序request請求封裝,驗簽代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-12-12

最新評論