前段時間在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的環境下寫，就能得到其所示高寬了
});
也就是說，以上能夠獲取到圖片高寬的方法都要以圖片已經完全加載為前提。
好了，以我的能力就只能理解到這兒了，如有不妥之處，歡迎拍磚～～