javascript - 使用多选更改样式

Question

我想通过多选更改样式 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两者的属性(property)colors和 textcolor当它们是字符串并且可以直接使用时。
• 没有 yellow select 中的选项

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

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

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

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

当你用 jQuery 标记问题时，我建议使用这种替代方法，它将样式规则分离到 CSS 中，并简单地应用存储在选项值中的指定类:

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="colors" id="colors">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

<select name="textcolor" id="textcolor">
  <option value="black">Black Text</option>
  <option value="white">White Color</option>
</select>

<div id="box">
  Text
</div>