javascript - 如何使用 3 个单选按钮并将这些按钮与 div 标签的不同样式相关联？

Question

我创建了一个 div 标签并在其中写了一些内容。并为该 div 标签创建了 3 种类型的样式效果。所以创建了 3 个单选按钮，现在我不知道如何将这些东西连接在一起。如果选中其中一个单选按钮，则 div 标签应采用其中一种样式。

提前致谢。

Answer 1

你只能用 css 来做。

input[value="blue"]:checked ~ div {
  background: blue;
}
input[value="yellow"]:checked ~ div {
  background: yellow;
}
input[value="orange"]:checked ~ div {
  background: orange;
}
div {
  width: 80px;
  height: 80px;
}

<label for="blue">blue</label>
<input type="radio" value="blue" id="blue" name="group1">
<label for="yellow">yellow</label>
<input type="radio" value="yellow" id="yellow" name="group1">
<label for="orange">orange</label>
<input type="radio" value="orange" id="orange" name="group1">
<div></div>