在前端开发中，经常需要对网页上的图片进行操作，其中之一就是改变它们的大小。虽然可以使用CSS来控制图片的尺寸，但有些情况下需要使用JS来动态地改变图片的大小。本文将介绍如何使用JavaScript来改变图片的大小，并附带示例代码。
1. HTML和CSS
首先，在HTML文件中添加一个元素，以及一个<input />元素来控制图片的大小。然后，使用CSS来设置
元素的初始大小：
-- -------------------- ---- -------
---- ------------ ------------------------
------ ------------ -------- --------- ----------- -------------
-------
-------- -
------ ------
------- -----
-
--------在上面的代码中，我们将图片的宽度设置为200px，并让高度自适应。另外，我们还添加了一个滑动条来控制图片大小，它的ID为“myRange”，最小值为50，最大值为500，初始值为200。
2. JavaScript
接下来，我们使用JavaScript来实现当滑动条的值改变时，改变图片的大小。我们首先获取到滑动条的元素和图片元素：
var slider = document.getElementById("myRange");
var image = document.getElementById("myImage");然后，我们可以使用以下代码来动态地改变图片的宽度：
slider.oninput = function() {
image.style.width = this.value + "px";
}在上面的代码中，我们使用oninput事件来监听滑动条的值是否改变。当滑动条的值改变时，我们将图片的宽度设置为滑动条的值加上“px”。
3. 完整代码
下面是完整的HTML、CSS和JavaScript代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----- ---- ---- ------------------
-------
-------- -
------ ------
------- -----
-
--------
-------
------
---- ------------ ------------------------
------ ------------ -------- --------- ----------- -------------
--------
--- ------ - -----------------------------------
--- ----- - -----------------------------------
-------------- - ---------- -
----------------- - ---------- - -----
-
---------
-------
-------4. 总结
通过本文的介绍，你已经学会了如何使用JavaScript来改变图片的大小。这种技术可以用于各种前端开发场景，包括制作响应式网站和动态调整图片大小等。希望本文能够对你有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26856