Question

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

Answer 1

如果你有这样的图像：

<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";

代替

Answer 2

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

代码略有修改：

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

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

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

2 个答案: