CSS点击改变颜色

### 使用CSS和JavaScript实现点击元素后改变颜色并保持 为了实现在点击某个元素之后更改其颜色并且使这种变化一直持续到下一次点击操作，可以采用组合使用HTML、CSS以及少量的JavaScript来完成这一功能。具体来说： 通过定义特定的类，在被应用至目标元素时能够触发所需的视觉变更。利用事件监听器捕获用户的交互行为，并动态调整这些类的状态。 #### HTML结构 创建一系列具有不同背景色选项的颜色按钮，以及一个用于展示所选颜色覆盖层的对象。 ```html <div id="product-shape"></div> <button class="color" data-hex="#ff0000">Red</button> <button class="color" data-hex="#00ff00">Green</button> <button class="color" data-hex="#0000ff">Blue</button> ``` #### CSS样式设置 预先设定好各个`.color`按钮的基础外观属性，同时指定当它们获得额外的激活状态(`active`)类时应呈现的新风格。 ```css .color { padding: 10px; margin-right: 5px; } #product-shape { width: 100px; height: 100px; border: solid 1px black; } .active { background-color: lightgray !important; } ``` #### JavaScript逻辑控制 编写脚本以响应用户的选择动作，更新图像上的遮罩颜色的同时也标记当前活动项。 ```javascript const overlay = document.getElementById("product-shape"); let els = document.getElementsByClassName("color"); for (let i = 0; i < els.length; i++) { els[i].addEventListener('click', function(event){ let current = event.target; // 移除所有先前选定项目的'active'类 for(let j=0;j<els.length;j++){ els[j].classList.remove('active'); } // 给当前项目添加'active'类 current.classList.add('active'); // 更改overlay填充颜色为新选择的颜色 let hex=current.getAttribute("data-hex"); overlay.style.backgroundColor = hex; }); } ``` 上述方法不仅实现了点击后的即时反馈——即刻改变颜色，而且由于引入了持久性的`active`类，使得即使页面刷新之前的选择也会得以保留[^1]。