日期:2014-05-16 浏览次数:20336 次
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只是只读属性,不能用来设置图片的大小,不能持续放大。
附:MM.jpg http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg