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

Question

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

<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 上使用了属性 class 而不是 id。

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

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

因此，除了遵循事件教程的善意建议外，我还建议您查看浏览器中的开发人员工具。它们包含一个 JavaScript 控制台，如果代码是运行，它会显示错误。因此，一旦附加了事件，您就可以查看控制台以查找其他错误。

无论如何，这次我已经为你做到了。以下是固定片段。我还使用该值来设置背景颜色，因此您可以在不访问实际图像的情况下大致看到它的工作情况。

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;

};

<div id="idcard">
  <p>Select Background Image</p>
  <select onchange="changeBgColor();" id="select-idcard">
    <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>

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

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

How to change background image of div with select tag, using javascript?

html

javascript

background-image