Question

如何使用select标签更改div的背景图像，以便在选择某个选项后背景发生变化，这是我的代码：

<div class="idcard" id="idcard-div"></div>
<div class="select-idcard" id="idcard-select">
        <p>Select Background Image</p>
        <select>
            <option id="idcard-option1" value="blue">Default/Blue</option>
            <option id="idcard-option2" value="red">Red</option>
            <option id="idcard-option3" value="purple">Purple</option>
            <option id="idcard-option4" value="green">Green</option>
        <select>
    </div>

Javascript代码：

var changeBgColor = function(){
        var idCardBg = document.getElementById("idcard-div");
        if(document.getElementById("idcard-option1").value === "blue"){
            idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
        }else if(document.getElementById("idcard-option2").value === "red"){
            idCardBg.style.backgroundImage = "url('redbg.jpg')";
        }else if(document.getElementById("idcard-option3").value === "purple"){
            idCardBg.style.backgroundImage = "url('purplebg.jpg')";
        }else if(document.getElementById("idcard-option3").value === "green"){
            idCardBg.style.backgroundImage = "url('greenbg.jpg')";
        }else{
            idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
        }
    };

...

changeBgColor();

Answer 1

你犯了几个错误。

首先，ID不匹配，并且您在div上使用了属性frame而不是class。

此外，您应该获取id元素的值，而不是其选项的值。

最后，您当然必须将事件附加到select元素。我已经在下面的代码段中使用HTML完成了这项操作，但您也可以使用select属性或使用onchange在JavaScript中执行此操作。

因此，除了提供关于事件教程的良好建议外，我还建议您查看浏览器中的开发人员工具。它们包含一个JavaScript控制台，可在运行代码时显示错误。因此，只要您附加了事件，就可以查看控制台以查找其他错误。

无论如何，这次我已经为你完成了这件事。下面是固定的代码段。我还使用该值来设置背景颜色，这样您就可以大致看到它无法访问实际图像。

addEventListener

var changeBgColor = function(){
      
  var idCardBg = document.getElementById("idcard");
  idCardBg.style.backgroundImage = "url('tigerbg.jpg')";

  if(document.getElementById("select-idcard").value === "blue"){
    idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
  }else if(document.getElementById("select-idcard").value === "red"){
    idCardBg.style.backgroundImage = "url('redbg.jpg')";
  }else if(document.getElementById("select-idcard").value === "purple"){
    idCardBg.style.backgroundImage = "url('purplebg.jpg')";
  }else if(document.getElementById("select-idcard").value === "green"){
    idCardBg.style.backgroundImage = "url('greenbg.jpg')";
  }else{
    idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
  }
  idCardBg.style.backgroundColor = document.getElementById("select-idcard").value;

};

Answer 2

HTML更改

<select id="colorSelect" onchange="changeBgColor();">
  <option value="blue">blue</option>
  <option value="red">red</option>
</select>

JS更改（使用select.options数组及其值）

var changeBgColor = function(){
  var idCardBg = document.getElementById("idcard-select");
  var colorSelect = document.getElementById("colorSelect");
  switch (colorSelect.options[colorSelect.selectedIndex].value)
  {
    case 'blue': idCardBg.style.backgroundImage = "url('bluebg.jpg')"; break;
    case 'red': idCardBg.style.backgroundImage = "url('redbg.jpg')"; break;
    default:
      idCardBg.style.backgroundImage = "url('tigerbg.jpg')";
    break;
  }
}

如何用select标签更改div的背景图片，使用javascript？

2 个答案: