Javascript 如何使用滑块更改图像大小？

我有这段代码，我想知道是否可以通过移动滑块来改变图像的大小：

类似于：

document.getElementById（“滑块”）.addEventlistener（“更改”，（值）=>{
让image=document.getElementById（“Elon”）；
image.style.width=值；
image.style.height=值；
});

---

请注意，这只是一个草图，如果您只是复制并粘贴它，它可能不起作用。

您可以将eventListener添加到范围中，然后在其中应用您的逻辑来更改图像的尺寸

const slider=document.getElementById（'slider'）；
slider.addEventListener（'input'，handleChange）；
功能手柄更改（e）{
const img=document.getElementById（“Elon”）；
const{value，max}=e.target；
img.style.width=`${value*max}px`；
img.style.height=`${value*max}px`；
}

---

在滑块更改时更改img宽度。像下面这样

const sliderElem=document.getElementById（'Slider'）；
const imageElem=document.getElementById（'image'）；
函数sliderChange（）{
const width=image.getAttribute（'width'）；
setAttribute（“宽度”，数字（宽度）+数字（sliderElem.value））；
}

---

您需要为此使用一些javascript 下面是您可以运行并查看的代码。 如果你想要更多的缩放，那么根据你的选择写20或30，而不是x*10

document.getElementById（“滑块”）.oninput=函数changeMageSize（）{
var x=document.getElementById（“Slider”）.value；
document.getElementById（“Elon”）.style.height=String（x*10）+“px”；
}

---

您可以向侦听“更改”或“输入”事件的输入元素添加事件侦听器，并为其提供一个函数，将其参数值连接到图像元素的宽度和高度属性。