如何添加JavaScript实现点击黄色元素时改变盒子背景为黄色？

嘿，我来帮你搞定这个需求！你的参考代码已经给了很好的基础，咱们只需要稍作调整就能达成目标。

核心思路 #

咱们要做的就是三步：

• 给触发点击的黄色元素设置唯一标识（比如id），方便JS获取它
• 给这个黄色元素绑定点击事件
• 点击触发时，找到目标盒子并修改它的背景色为黄色

完整可运行代码示例 #

下面是整理好的完整代码，关键部分我都标出来了：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { 
            font: 1.2em Verdana, sans-serif; 
        } 
        #menu { 
            list-style-type: none; 
            padding-left: 0; 
            margin-left: 0; 
        } 
        #menu li { 
            border: 1px solid black; 
            border-radius: 1em; 
            padding: 3px; 
            text-align: center; 
            margin-bottom: 3px; 
            width: 25%; 
        }
        /* 给黄色触发元素单独设置背景色 */
        #yellow-trigger {
            background-color: yellow;
        }
        /* 其他菜单元素保留原有的水绿色 */
        #menu li:not(#yellow-trigger) {
            background-color: aquamarine;
        }
        div { 
            width: 100px; 
            height: 100px; 
            border: 1px solid black; 
            font-size: 1.5em; 
        }
    </style>
</head>
<body>
    <h2 id="firstHeading">点击黄色元素更改盒子背景</h2>
    <ul id="menu">
        <li>普通元素1</li>
        <!-- 这是黄色触发元素，给它加个唯一id：yellow-trigger -->
        <li id="yellow-trigger">点击我变黄色</li>
        <li>普通元素3</li>
    </ul>
    <!-- 需要改变背景的目标盒子 -->
    <div id="box1">目标盒子</div>

    <script>
        // 获取黄色触发元素
        const yellowBtn = document.getElementById('yellow-trigger');
        // 绑定点击事件
        yellowBtn.onclick = function() {
            // 找到目标盒子，修改背景色为黄色
            document.getElementById('box1').style.backgroundColor = 'yellow';
            // 也可以用十六进制值：#ffff00，视觉效果完全一致
            // document.getElementById('box1').style.backgroundColor = '#ffff00';
        }
    </script>
</body>
</html>

关键代码说明 #

• CSS部分：专门给黄色触发元素设置背景色，用:not选择器让其他菜单元素保留原有样式，避免冲突
• JavaScript部分：
  1. 通过document.getElementById精准获取到黄色触发元素
  2. 给它绑定onclick事件，点击时执行内部函数
  3. 在函数里找到目标盒子box1，修改它的style.backgroundColor属性为黄色即可

这样点击黄色的菜单元素时，目标盒子的背景就会立刻变成黄色啦！

内容的提问来源于stack exchange，提问作者DanielAA9