单击按钮更改背景颜色
Change background color with button click
我想用JavaScript按钮点击按钮更改多个div背景:
JS:
function button_click(color) {
document.getElementById("box").style.backgroundColor = color;
document.getElementById("box1").style.backgroundColor = color;
}
CSS:
div#box {
width: 100px;
height: 100px;
background-color: #000;
}
div#box1 {
width: 100px;
height: 100px;
background-color: #000;
}
HTML:
<div id="box">Hey there</div>
<div id="box1">Hey there</div>
<button type="button" onclick="button_click('red');">Switch</button>
哦,我想用这个按钮来改变背景颜色在4个div中,隐藏和取消隐藏3个div,也许还有其他一些垃圾这只是我实际项目中的一段代码项目我正在使用Bootstrap,但我不知道它是否有什么可以帮我处理这个特殊的
您可以为应该更改颜色的按钮提供标识符,例如:
<button type="button" id="change-color">Switch colors</button>
给出要更改全局class
的div,并使用data
属性指定color
,例如:
<div id="box" class='color-div' data-color='red'>Hey there red</div>
<div id="box1" class='color-div' data-color='green'>Hey there green</div>
<div id="box2" class='color-div' data-color='blue'>Hey there blue</div>
并将click
事件分配给按钮,该按钮将遍历所有div并在数据中为每个指定的颜色:
$('body').on('click', '.change-color', function(){
var color = $(this).data('color');
$('.global-class-'+color).css('background-color', color);
})
希望这能有所帮助。
代码段
$('body').on('click', '#change-color', function(){
$('.color-div').each(function(){
$(this).css('background-color', $(this).data('color'));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="change-color">Switch colors</button>
<div id="box" class='color-div' data-color='red'>Hey there red</div>
<div id="box1" class='color-div' data-color='green'>Hey there green</div>
<div id="box2" class='color-div' data-color='blue'>Hey there blue</div>
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用jquery更改html中的背景颜色
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- JS幻灯片与CSS背景颜色变化
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- Javascript通过列表项的函数和css来更改背景颜色
- Javascript没有从数组中选择背景颜色
- 使用圆中的数组更改背景颜色项目
- 如何用jquery动画改变背景颜色,就像一个过渡
- 使用jquery交换并保存背景颜色
- j查询如何设置/取消设置下拉菜单的背景颜色
- 使用angularjs根据时间更改背景颜色
- 设置Dojo量表的背景颜色
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- 使用javascript更改任意文本的背景颜色
- 在用Javascript更改背景颜色后:hover don'不要改变颜色
- 图像内部的透明背景颜色不受影响
- jQuery mobile-动态更改ui页面背景颜色
- 切换按钮的背景颜色
- JavaScript更改类的背景颜色