javascript 獲取圖片尺寸及放大圖片
更新時間：2013年09月04日 08:44:06 作者：
獲取圖片尺寸(不設置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴重！感興趣的朋友可以參考下
1)獲取圖片尺寸
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
//DOM屬性
console.log("width="+t.width);//200
console.log("height="+t.height);//300
//操作樣式
console.log("styleWidth="+t.style.width);//空
console.log("styleHeight="+t.style.height);//空
}
2)獲取圖片尺寸(不設置寬高)
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)"/>
<script>
function getWH(t){
//DOM屬性
console.log("width="+t.width);//200
console.log("height="+t.height);//300
//操作樣式
console.log("styleWidth="+t.style.width);//空
console.log("styleHeight="+t.style.height);//空
}
我們只要不在style中顯式地設置它，寬高永遠為空！
3)放大圖片：
這里我們利用了IE的私有屬性防止圖片放大失真嚴重！
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
t.width *= 2;
t.height *= 2;
//每點擊一次，寬高放大一倍
}
</script>
4)在FF與谷歌中，我們還可以用naturalWidth與naturalHeight取得圖片的原大?。?/STRONG>
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
console.log("width="+t.naturalWidth);
console.log("height="+t.naturalHeight);
t.width = t.naturalWidth * 2;
t.height = t.naturalHeight * 2;
}
</script>
naturalWidth和naturalHeight只是只讀屬性，不能用來設置圖片的大小，不能持續(xù)放大。
復制代碼 代碼如下:
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
//DOM屬性
console.log("width="+t.width);//200
console.log("height="+t.height);//300
//操作樣式
console.log("styleWidth="+t.style.width);//空
console.log("styleHeight="+t.style.height);//空
}
2)獲取圖片尺寸(不設置寬高)
復制代碼 代碼如下:
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)"/>
<script>
function getWH(t){
//DOM屬性
console.log("width="+t.width);//200
console.log("height="+t.height);//300
//操作樣式
console.log("styleWidth="+t.style.width);//空
console.log("styleHeight="+t.style.height);//空
}
我們只要不在style中顯式地設置它，寬高永遠為空！
3)放大圖片：
這里我們利用了IE的私有屬性防止圖片放大失真嚴重！
復制代碼 代碼如下:
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
t.width *= 2;
t.height *= 2;
//每點擊一次，寬高放大一倍
}
</script>
4)在FF與谷歌中，我們還可以用naturalWidth與naturalHeight取得圖片的原大?。?/STRONG>
復制代碼 代碼如下:
<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(實際大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
console.log("width="+t.naturalWidth);
console.log("height="+t.naturalHeight);
t.width = t.naturalWidth * 2;
t.height = t.naturalHeight * 2;
}
</script>
naturalWidth和naturalHeight只是只讀屬性，不能用來設置圖片的大小，不能持續(xù)放大。
相關文章
下面小編就為大家分享一篇js將鍵值對字符串轉為json字符串的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了es6新特性之 class 基本用法 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
下面小編就為大家?guī)硪黄狫S中多種方式創(chuàng)建對象詳解。小編覺得挺不錯的?，F(xiàn)在分享給大家，給大家一個參考。一起跟隨小編過來看看吧2016-03-03
根據(jù)判斷瀏覽器類型屏幕分辨率自動調(diào)用不同CSS的代碼
根據(jù)判斷瀏覽器類型屏幕分辨率自動調(diào)用不同CSS的代碼...2007-02-02
JavaScript前端開發(fā)之實現(xiàn)二進制讀寫操作
這篇文章主要介紹了JavaScript前端開發(fā)之實現(xiàn)二進制讀寫操作的相關資料,需要的朋友可以參考下2015-11-11
本文分享了一個利用AmCharts制作的汽車速度計速表，通過設置不同的速度（數(shù)字）來動態(tài)改變計速表的指針。使用也非常簡單，下面給出方法。2015-08-08
ZeroClipboard插件實現(xiàn)多瀏覽器復制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復制按鈕之上，這樣其實點擊的不是按鈕而是Flash ，這樣將需要的內(nèi)容傳入Flash，再通過Flash的復制功能把傳入的內(nèi)容復制到剪貼板2014-08-08
這篇文章主要介紹了Javascript中call的兩種用法實例，有需要的朋友可以參考一下2013-12-12
js實現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果
這篇文章主要介紹了js實現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果,實例分析了javascript實現(xiàn)百葉窗動畫效果的技巧,需要的朋友可以參考下2015-03-03
JS獲取后臺Cookies值的小例子，需要的朋友可以參考一下2013-03-03