Question

我正在尝试从下拉列表中选择时更改html页面背景图像（url图像），但我无法找到如何... 以下是我的代码：

<select id="styledSelect" onchange="doit()">
<option value="0" /> Select...
<option value="1" /> 1
<option value="2" /> 2
<option value="3" /> 3
<option value="4" /> 4
<option value="5" /> 5
<option value="6" /> 6
<option value="7" /> 7
<option value="8" /> 8
<option value="9" /> 9
</select>

<script>

function between(x, min, max) {
return x >= min && x <= max;
}

function doit() {

var s = document.getElementById('styledSelect');

if (between(s.value, 1, 3)) {
[http image1]
}
else if (between(s.value, 4, 6)) {
[http image2]
}
else if (between(s.value, 7, 9)) {
[http image3]
}
}
</script>

Answer 1

你几乎就在那里。只需查看下面的代码，您就会以正确的方式获得。（只选择1,2或3，我没有添加其他图片，您可以在需要时添加）

＆＃13;

function between(x, min, max) {
  return x >= min && x <= max;
}

function doit() {

  var s = document.getElementById('styledSelect');
  
  if (between(s.value, 1, 3)) {
    document.body.style.backgroundImage = "url('https://i2.wp.com/ape-al.org.br/wp-content/uploads/2016/07/parallax-bg.jpg?fit=1600%2C730')";
  }
  else if (between(s.value, 4, 6)) {
    document.body.style.backgroundImage = "url(LINK/PATH TO YOUR IMAGE);";
  }
  else if (between(s.value, 7, 9)) {
    document.body.style.backgroundImage = "url(LINK/PATH TO YOUR IMAGE);";
  }
}

＆＃13;

<body>
  <select id="styledSelect" onchange="doit()">
  <option value="0" /> Select...
  <option value="1" /> 1
  <option value="2" /> 2
  <option value="3" /> 3
  <option value="4" /> 4
  <option value="5" /> 5
  <option value="6" /> 6
  <option value="7" /> 7
  <option value="8" /> 8
  <option value="9" /> 9
  </select>
</body>

＆＃13;

使用select标签更改html页面背景

1 个答案: