javascript Get image size and enlarge image_javascript skills

1) Get the image size

Copy code The code is as follows:

< ;img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(actual size 200*300)" onclick="getWH(this )" width="200" height="300"/>
<script> <br>function getWH(t){ <br>//DOM attribute<br>console.log("width=" t .width);//200 <br>console.log("height=" t.height);//300 <br>//Operating style<br>console.log("styleWidth=" t.style.width) ;//Empty<br>console.log("styleHeight=" t.style.height);//Empty<br>} <br> </div> <br><strong>2) Get the image size (do not set the width High)</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="27658" class="copybut" id="copybut27658" onclick="doCopy('code27658')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code27658"> <br><img src="http ://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(actual size 200*300)" onclick="getWH(this)"/> <br><script> <br>function getWH(t){ <br>//DOM attribute<br>console.log("width=" t.width);//200 <br>console.log("height =" t.height);///300 <br>//Operation style<br>console.log("styleWidth=" t.style.width);//Empty<br>console.log("styleHeight=" t .style.height);//Empty<br>} <br> </div> <br>As long as we don’t explicitly set it in style, the width and height will always be empty! <br><br><strong>3) Enlarge the picture </strong>: <br><br>Here we use the private properties of IE to prevent serious distortion when enlarging the picture! <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="5632" class="copybut" id="copybut5632" onclick="doCopy('code5632')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code5632"> <br><img src="http://img. my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(actual size 200*300)" onclick="getWH(this)" width="200" height="300 "/> <br><script> <br>function getWH(t){ <br>t.width *= 2; <br>t.height *= 2; <br>//Each click, width Magnify twice as high <br>} <br></script>

4) In FF and Google, we can also use naturalWidth and naturalHeight to get the original size of the image!

Copy code The code is as follows:

<script> <br>function getWH(t){ <br>console.log("width=" t.naturalWidth); <br>console.log("height=" t.naturalHeight); <br>t.width = t.naturalWidth * 2; <br>t.height = t.naturalHeight * 2; <br>} <br></script>

naturalWidth and naturalHeight are only read-only properties and cannot be used to set the size of the image and cannot be continuously enlarged.