JavaScript 获取图片尺寸及放大图片的实现方法

 
<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
//操作CSS样式
console.log("styleWidth="+t.style.width);//结果为空
console.log("styleHeight="+t.style.height);//结果为空
} 

 
<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
//操作CSS样式
console.log("styleWidth="+t.style.width);//结果为空
console.log("styleHeight="+t.style.height);//结果为空
} 

结论：若未在样式中显式定义宽高，则style.width和style.height始终为空。

此处利用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>

 
<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仅为只读属性，无法用于动态设置图片尺寸，故不能实现持续放大效果。