javascript - 如何链接下拉菜单中可用的选项以更改图像的大小

Question

前几天我在一个网站上看到了一些东西，左边有字段，右边有图像。当我更改属性时，可以说长度立即反映在图像上，而不会引导我进入新页面。我觉得这比预定义的要好。我对 JavaScript 比较陌生，所以任何人都可以指导我完成这个过程。我尝试在 Three.js 上查找，但没有得到任何合适的方法。任何帮助将不胜感激。

Answer 1

根据Patrick的回答，我做了一个简单的回答。这是你需要的吗？

代码稍作修改：

function alter_image(width) {
  var image = document.getElementById('my-image');

  image.style.width = width != 'default' ? width + "px" : "auto";
}

Answer 2

如果你有这样的图像：

<img src="suchnsuch.jpg" id="my-image" />

在下拉元素中将 onChange 属性设置为

<select onChange="alter_image( this.value );">
    <option value="default">Default</option>
    <option value="500">500px</option>
</select>

然后定义一个Javascript函数：

function alter_image( width ) {
    image = document.getElementById('my-image');
    image.style.width = width + "px";
}

当下拉列表被改变时，它应该调用 alter_image 函数及其值，进而改变图像的宽度属性。

如果您的图像的宽度被定义为一个属性（就像这样 width="300px" ）那么宽度代码应该是

image.width = width + "px";

反而