Question

我正在尝试使用下拉菜单更改正文的背景图片（id =“shelf”）：

<script type="text/javascript">
function changeTheme()
{document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
  var e = document.getElementById("themes");
  var theme = e.options[e.selectedIndex].value;
}  
</script>
</head>
<body id="shelf">
<select id="themes" onChange="changeTheme()">
  <option value="images/bg/default.png">Default</option>
  <option value="images/bg/oriental.png">Oriental</option>
  <option value="images/bg/office.png">Office</option>
  <option value="images/bg/old.png">Old</option>
</select>
</body>

但我不知道为什么它不起作用..代码中的问题在哪里？

Answer 1

你看到的行为究竟是什么？

试试这个：

<html>
<head>
<script type="text/javascript">
function changeTheme()
{

  var e = document.getElementById("themes");
  var theme = e.options[e.selectedIndex].value;
  console.log(theme);
  document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}  
</script>
</head>
<body id="shelf">
<select id="themes" onChange="changeTheme()">
  <option value="images/bg/default.png">Default</option>
  <option value="images/bg/oriental.png">Oriental</option>
  <option value="images/bg/office.png">Office</option>
  <option value="images/bg/old.png">Old</option>
</select>
</body>    
</html>

Answer 2

它正在运作。

function changeTheme() {
    var e = document.getElementById("themes");
    var theme = e.options[e.selectedIndex].value;
    document.getElementById("shelf").style.backgroundImage = "url(" + theme + ")";

}

如何通过标签“选中”更改背景图片

2 个答案: