选择单选按钮时更改 div 背景颜色

概述

本文将介绍如何在选择单选按钮时通过 JavaScript 更改一个 <div> 元素的背景颜色。我们将使用 HTML、CSS 和 JavaScript 来实现该功能。

HTML 结构

首先，我们需要在 HTML 文件中创建一个 <div> 元素和一组单选按钮。

<div id="myDiv">这是一个示例<div>

<input type="radio" name="color" value="red">
<label for="red">红色</label>

<input type="radio" name="color" value="blue">
<label for="blue">蓝色</label>

<input type="radio" name="color" value="green">
<label for="green">绿色</label>

CSS 样式

接下来，我们可以通过 CSS 来设置 <div> 元素的初始背景颜色。

#myDiv {
  width: 200px;
  height: 200px;
  background-color: gray;
}

JavaScript 逻辑

现在，我们需要编写 JavaScript 代码来监听单选按钮的选择，并根据选择的值更改 <div> 元素的背景颜色。

// 获取单选按钮的 DOM 元素
const radioButtons = document.getElementsByName("color");

// 监听单选按钮的选择变化
radioButtons.forEach(function(radioButton) {
  radioButton.addEventListener("change", function() {
    // 获取选中的单选按钮的值
    const selectedColor = document.querySelector('input[name="color"]:checked').value;

    // 更改 div 元素的背景颜色
    const myDiv = document.getElementById("myDiv");
    myDiv.style.backgroundColor = selectedColor;
  });
});

完整代码

<div id="myDiv">这是一个示例<div>

<input type="radio" name="color" value="red">
<label for="red">红色</label>

<input type="radio" name="color" value="blue">
<label for="blue">蓝色</label>

<input type="radio" name="color" value="green">
<label for="green">绿色</label>

<style>
#myDiv {
  width: 200px;
  height: 200px;
  background-color: gray;
}
</style>

<script>
const radioButtons = document.getElementsByName("color");

radioButtons.forEach(function(radioButton) {
  radioButton.addEventListener("change", function() {
    const selectedColor = document.querySelector('input[name="color"]:checked').value;
    const myDiv = document.getElementById("myDiv");
    myDiv.style.backgroundColor = selectedColor;
  });
});
</script>

以上是一个使用 HTML、CSS 和 JavaScript 实现选择单选按钮时更改 <div> 背景颜色的示例代码。你可以根据自己的需求修改代码和样式。