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

How to link the options available in a drop down menu to change the size of an image

本文关键字：选项 图像 链接 下拉菜单 何链接      更新时间：2023-09-26

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

如果您有这样的图像：

<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函数，然后更改图像的宽度属性。

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

image.width = width + "px";

而

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

代码略有修改：

function alter_image(width) {
  var image = document.getElementById('my-image');
  image.style.width = width != 'default' ? width + "px" : "auto";
}
相关文章：