Tips:javascript 图片放大和取得尺寸

来源：互联网发布：山西中考信息技术软件编辑：程序博客网时间：2024/06/06 02:46

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);//200console.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);//200console.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只是只读属性，不能用来设置图片的大小，不能持续放大。

附：MM.jpg http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg