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