本文介绍在JavaScript中获取图片实际尺寸的方法，对比DOM属性width/height与style.width的区别，并演示如何通过naturalWidth和naturalHeight实现图片放大而不失真。
获取图片尺寸与DOM属性分析
示例代码如下：
<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);//结果为空
} 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
//操作CSS样式
console.log("styleWidth="+t.style.width);//结果为空
console.log("styleHeight="+t.style.height);//结果为空
} 结论：若未在样式中显式定义宽高，则style.width和style.height始终为空。
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仅为只读属性，无法用于动态设置图片尺寸，故不能实现持续放大效果。
