JavaScript中怎么缩小图片

133 阅读 0 评论 88 点赞

我是靠谱客的博主自由帽子，这篇文章主要介绍JavaScript中怎么缩小图片，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、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>1
2
3
4
5
6
7
<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>
登录后复制

输出结果：

方法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>1
2
3
4
5
6
7
<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>
登录后复制

输出结果：