浏覽器中顯示的圖片大小未必是他真實的高和寬,比如像下面這樣,我們給他加上寬和高的樣式
<img src="IE.png" style="width:25px;height:25px;">
這樣在浏覽器中顯示的大小就是25px。那麼我們如何獲取圖片的真實大小呢?,下面的代碼就實現了這個功能
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<img src="IE.png" id="image" style="width:25px;height:25px;">
<script>
// 設置延時保證圖片加載完成
setTimeout(function() {
var
real_width,
real_height,
_im = document.getElementById('image'),
im = document.createElement('img');
im.src = _im.src,
real_width = im.width,
real_height = im.height;
alert(real_width+'\n'+real_height);
},500);
</script>
</body>
</html>
注意:上面代碼本人在IE7+和chrome上都測試過了,因為沒有裝IE6,所以沒法測試。
非常好用的代碼,本人大多數項目中都在使用,大家放心用吧