Question

我想用多个select更改样式CSS，但不幸的是，我的代码很糟糕。请看我的代码。怎么了？我想使用“if”语句，因为我有时会在一个选择中更改很多样式。例如，SELECT编号“1”将有5种样式进行更改，但SELECT编号“2”将只有1种样式需要更改。有什么想法吗？

https://jsfiddle.net/129ax3bk/6/

function changeBackground() {
  var box = document.getElementById('box');
  var colors = document.getElementById('colors').value;
  var textcolor = document.getElementById('textcolor').value;

  if (colors.value = "yellow" && textcolor.value = "black") {
    box.style.background = "yellow"; // YELLOW + BLACK
    box.style.color = "black";
  } else if (colors.value = "yellow" && textcolor.value = "white") {
    box.style.background: "lightyellow"; // YELLOW + WHITE
    box.style.color = "white";
  } else if (colors.value = "blue" && textcolor.value = "black") {
    box.style.background: "blue"; // BLUE + BLACK
    box.style.color = "black";
  } else if (colors.value = "blue" && textcolor.value = "white") {
    box.style.background: "lightblue"; // BLUE + WHITE
    box.style.color = "white";
  }
}

#box {
  background: red;
  color: black;
  width: 200px;
  height: 200px;
}

<select name="colors" id="colors" onChange="changeBackground()">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>

<select name="textcolor" id="textcolor" onChange="changeBackground()">
  <option value="black">Black Text</option>
  <option value="white">White Color</option>
</select>

<div id="box">
  Text
</div>

Answer 1

您的代码有几个问题：

您正在使用=进行相等比较而不是==
您使用:将background的设置者与值分开，而不是=
您正在使用background而不是backgroundColor
当他们是字符串并且可以直接使用时，您尝试访问value和colors的{{1}}属性。
textcolor

yellow

考虑到这一点，试试这个：

＆＃13;

select

＆＃13;

function changeBackground() {
  var box = document.getElementById('box');
  var colors = document.getElementById('colors').value;
  var textcolor = document.getElementById('textcolor').value;

  if (colors == "yellow" && textcolor == "black") {
    box.style.backgroundColor = "yellow"; // YELLOW + BLACK
    box.style.color = "black";
  } else if (colors == "yellow" && textcolor == "white") {
    box.style.backgroundColor = "lightyellow"; // YELLOW + WHITE
    box.style.color = "white";
  } else if (colors == "blue" && textcolor == "black") {
    box.style.backgroundColor = "blue"; // BLUE + BLACK
    box.style.color = "black";
  } else if (colors == "blue" && textcolor == "white") {
    box.style.backgroundColor = "lightblue"; // BLUE + WHITE
    box.style.color = "white";
  }
}

＆＃13;

#box {
  background-color: red;
  color: black;
  width: 200px;
  height: 200px;
}

＆＃13;

当您使用jQuery标记问题时，我建议使用此替代方法，而是将样式规则分离为CSS，并简单地应用存储在选项值中的指定类：

＆＃13;

<select name="colors" id="colors" onChange="changeBackground()">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

<select name="textcolor" id="textcolor" onChange="changeBackground()">
  <option value="black">Black Text</option>
  <option value="white">White Color</option>
</select>

<div id="box">
  Text
</div>

＆＃13;

$('#colors, #textcolor').change(function() {
  $('#box').removeClass().addClass($('#colors').val() + $('#textcolor').val());
});

＆＃13;

#box {
  background-color: red;
  color: black;
  width: 200px;
  height: 200px;
}
#box.yellowblack {
  background-color: yellow;
  color: black;
}
#box.yellowwhite {
  background-color: lightyellow;
  color: white;
}
#box.blueblack {
  background-color: blue;
  color: black;
}
#box.bluewhite {
  background-color: lightblue;
  color: white;
}

＆＃13;

使用多个选择更改样式

1 个答案: