Question

我试图为此添加一些交互式控件：http://jakscoproductions.com/2520dip8/

以下是具体的代码： HTML

        Zoom:
        <select id="zoom" onchange="zoom()">
            <option>50%</option>
            <option>75%</option>
            <option selected="selected">100%</option>
            <option>125%</option>
            <option>150%</option>
            <option>200%</option>
        </select>
    Opacity: 
        <select id="opacity" onchange="opak()"> 
            <option value="0.3">30%</option>
            <option value="0.55">55%</option>
            <option value="0.7">70%</option>
            <option value="0.85" selected="selected">85%</option>
            <option value="0.9">90%</option>
            <option value="0.99">99%</option>
        </select>

JS

//zoom
function zoom()
{
var zooM=document.getElementById("zoom");
document.getElementById("bbtop").style.width="zooM.options[zooM.selectedIndex]";
document.getElementById("bg").style.width="zooM.options[zooM.selectedIndex]";
}
//opacity
function opak()
{
var opak=document.getElementById("opacity");
var element = document.getElementById('bbtop');
element.style.opacity = "opak.options[opak.selectedIndex]";
element.style.filter  = "opak.options[opak.selectedIndex]";
}

我做错了什么？

Answer 1

删除字符串文字并分配所选选项的text（或value）属性，如下所示。

//zoom
function zoom()
{
   var zooM=document.getElementById("zoom");
   document.getElementById("bbtop").style.width= zooM.options[zooM.selectedIndex].text;
   document.getElementById("bg").style.width= zooM.options[zooM.selectedIndex].text;
}
//opacity
function opak()
{
   var opak=document.getElementById("opacity");
   var element = document.getElementById('bbtop');
   element.style.opacity = opak.options[opak.selectedIndex].text;
   element.style.filter  = opak.options[opak.selectedIndex].text;
}

Answer 2

element.style.opacity = "opak.options[opak.selectedIndex]";

此行将字符串设置为样式。使用上面一行返回的值。

使用而是element.style.opacity = opak.options[opak.selectedIndex];

Answer 3

这是正确的：

//zoom
function zoom() {
  var zooM=document.getElementById("zoom");
  document.getElementById("bbtop").style.height=zooM.options[zooM.selectedIndex].value;
  document.getElementById("bg").style.height=zooM.options[zooM.selectedIndex].value;
}

//opacity
function opak() {
  var opak=document.getElementById("opacity");
  var element = document.getElementById("bg");

  var opacityValue = opak.options[opak.selectedIndex].value;

  element.style.opacity = opacityValue;
  element.style.filter  = "alpha(opacity=" + opacityValue * 100 + ")";
}

修改：请注意我假设您要设置#bg元素的不透明度，因为#bbtop元素中没有图像。

用于更改HTML的Javascript下拉菜单

3 个答案: