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取得圖片的原大??!
<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取得圖片的原大??!
復制代碼 代碼如下:
<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ù)放大。

相關文章
實例代碼詳解javascript實現(xiàn)窗口抖動及qq窗口抖動
這篇文章主要介紹了實例代碼詳解javascript實現(xiàn)窗口抖動及qq窗口抖動的相關資料,需要的朋友可以參考下2016-01-01JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法
這篇文章主要介紹了JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法,涉及JavaScript針對頁面寬高的動態(tài)獲取與元素樣式動態(tài)運算的相關技巧,需要的朋友可以參考下2016-02-02javascript 實現(xiàn)字符串反轉(zhuǎn)的三種方法
這篇文章主要介紹了javascript 實現(xiàn)字符串反轉(zhuǎn)的三種方法,有需要的朋友可以參考一下2013-11-11layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法
今天小編就為大家分享一篇layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09