js獲取手機屏幕高度和寬度（js獲取手機屏幕分辨率）

一、上一文記錄了JS中網頁、屏幕中的各種寬高的辨析，這一節主要記錄JS中的獲取圖片各種高寬方面的不同，摘錄筆記僅供學習參考所用。

1、可以獲取圖片高寬的方法有：

onload后在打印;

obj.style.width(height);

obj.offsetWidth(offsetHeight);

obj.clientWidth(clientHeight);

getComputedStyle 與 currentStyle;

obj.naturalWidth(naturalHeight) ；

JQ獲??；

獲取圖片路徑(src)的方法；

2、方法詳解：

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

• // 圖片地址 后面加時間戳是為了避免緩存

var img_url = ‘/placea/placeb/**.jpg?’+Date.parse(new Date());

// 創建圖片對象

var img = new Image();

// 改變圖片的地址

img.src = img_url;

// 加載完成執行

img.onload = function(){

// 打印輸出

alert(‘width:’+img.width+’,height:’+img.height);

};

通過onload就能獲取到圖片的寬高了，但onload大一點的圖通常都比較慢，此方法獲取寬高不劃算。

• obj.style.width：只有在標簽里用style屬性寫進了width的大小，才可以獲取到值，否則只返回的為空。注意：在引入的樣式表中添加width值（不管是link引入還是html頁面中使用style標簽）也一樣獲取不到值，返回為空。
• obj.offsetWidth(offsetHeight);obj.clientWidth(clientHeight);這倆方法如果標簽沒有設置padding值及border值，那么它們兩個獲取到的值是一樣的。但很多情況下都不是這樣的，其實offsetWidth得到的是width值+padding值+border值，clientWidth得到的是width值+padding值。
• getComputedStyle；currentStyle；這倆是處理兼容性的兩個方法，獲取到的值都是圖片在屏幕上顯示的僅僅是圖片的高寬值，不會獲取到img標簽的padding及border值；但其中getComputedStyle適用于
  Firefox/IE9/Safari/Chrome/Opera瀏覽器，currentStyle適用于IE6/7/8。但是如果img標簽即使沒有設置style屬性也沒有引入樣式表，那么只有getComputedStyle能獲取到值，即為圖片本身高寬值，currentStyle則返回auto。
• obj.naturalWidth(naturalHeight)方法，這是HTML5里新添加的一個獲取元素高寬的方法，但只適用于
  Firefox/IE9/Safari/Chrome/Opera瀏覽器。需要注意是的在IE6/7/8瀏覽器中image.src只有在img圖片完全加載出來以后才獲取得到，否則會報錯。
• JQ獲取圖片寬高：假設圖片是<img />，圖片的寬度為width，高度為height

var width = $(“img”).width();

var height = $(“img”).height();

• 獲取圖片路徑(src)的方法：① 通過獲取圖片img節點的src屬性<img id=’test’ src=’1.png’ />② 通過document.getElementById找到img節點var oImg= document.getElementById(‘test’);③ 獲取src屬性alert(oImg.src);//獲取src屬性