单击按钮更改背景颜色

时间:2015-12-31 17:24:06

标签: javascript jquery html css twitter-bootstrap-3

我想使用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,但我不知道它是否有任何可能的东西   帮助我解决这个特殊情况

1 个答案:

答案 0 :(得分:2)

您可以为应更改颜色的按钮指定一个标识符,例如:

<button type="button" id="change-color">Switch colors</button>

并提供您想要更改全局class并使用data属性指定color的div,例如:

<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>