javascript - 单击时如何更改按钮的背景颜色？

Question

我研究了很多，然后找到了 this JSFiddle看起来像我需要的，但是，当我单击按钮时，页面 背景正在改变。相反，我希望在单击时更改按钮的颜色。

div{
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
label.btn {
    position: absolute;
    top:10px;
    left: 10px;
    z-index:2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}
label + input[type="checkbox"]:checked{
    background: #000;
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

Answer 1

这是相当微不足道的。只需将“按钮”label 元素移动到复选框之后，以便您可以使用 + 选择器(这称为 adjacent sibling selector ；不幸的是，没有 previous sibling 选择器)，并更改 CSS 以匹配。 JSFiddle

div{
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}
.btn {
    position: absolute;
    top:10px;
    left: 10px;
    z-index:2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + .btn {
    background: #5BC0DE;
}
/* label + input[type="checkbox"]:checked{
    background: #000;
} */ /* I've commented this last selector out as it is unused per Harry's point in the comments */

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<input type="checkbox" id="check" />
<label for="check" class="btn btn-default">Toggle background color</label>
<div></div>