<分区>
基本上，我想在单击按钮时使用 JavaScript 更改 CSS 中元素的背景颜色。
到目前为止，我的 CSS 看起来像这样:
div.box {
width:100px;
height:100px;
background-color:#FF2400;
}
它需要动态更改为多种颜色的选择，只需使用多个按钮即可(每个按钮都是不同的颜色)。
标签 javascript css
<分区>
基本上，我想在单击按钮时使用 JavaScript 更改 CSS 中元素的背景颜色。
到目前为止，我的 CSS 看起来像这样:
div.box {
width:100px;
height:100px;
background-color:#FF2400;
}
它需要动态更改为多种颜色的选择，只需使用多个按钮即可(每个按钮都是不同的颜色)。
最佳答案
完成:http://jsfiddle.net/iambriansreed/zmtU4/
更新为非 jQuery。
HTML
<div id="box"></div><div id="box"></div>
<button type="button" onclick="button_click('red');">Red</button>
<button type="button" onclick="button_click('blue');">Blue</button>
<button type="button" onclick="button_click('green');">Green</button>
<button type="button" onclick="button_click('yellow');">Yellow</button>
<button type="button" onclick="button_click('purple');">Purple</button>
纯JavaScript
function button_click(color){
document.getElementById("box").style.backgroundColor=color;
}
关于javascript - 使用 Javascript 更改 CSS 中元素的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10299020/
相关文章：
javascript - 如何在 HTML 和 CSS 中创建一个全屏视频背景，让我的所有组件都覆盖在它上面？
css - 使用 Bootstrap 设计自定义单元格大小表
javascript - 带有可关闭选项卡的 ExtJs Tabpanel 关闭事件
javascript - 无法解决的 CORS 问题!如何在MacOS上禁用Chrome的同源策略？
javascript - 将 Parent Div 收缩为 Foated Children
css - 在我的 CSS 中添加了两个背景，但只显示了一个
javascript - 如何在 JS 或 CSS 中使用 svg 作为鼠标光标？
javascript - 如何在使用 AnimatePresence 包装的 Next.js 页面中导航并滚动到具有 ID 的元素