JavaScript中怎么縮小圖片

JS縮小圖片的方法：1、使用setAttribute()方法，語法“圖片對象.setAttribute("width", "更小的寬度值")”。2、使用style對象的width屬性，語法“圖片對象.style.width="更小的值"”。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JavaScript中縮小圖片的方法

方法1：使用setAttribute()

<img id="img" src="img/1.jpg" width="500" /><br /><br /> <button onclick="myFunction()">縮小圖片</button> <script type="text/javascript"> 	function myFunction() { 		document.getElementById('img').setAttribute("width", "300"); 	} </script>

輸出結(jié)果：

方法2：使用style對象的width屬性

<img id="img" src="img/2.jpg" width="500" /><br /><br /> <button onclick="myFunction()">縮小圖片</button> <script type="text/javascript"> 	function myFunction() { 		document.getElementById('img').style.width="300px"; 	} </script>

輸出結(jié)果：

【推薦學(xué)習(xí)：javascript高級教程】