我想在复选框中更改CSS中的身体颜色。怎么做?
HTML -
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
JavaScript - 这里要粘贴什么?
CSS - 这里要过去什么?
非常感谢!
答案 0 :(得分:0)
好的,既然你是js的新手我已经评论了代码
HTML:
<body>
<p>
test
</p>
<label class="switch">
<input type="checkbox" id="test">
<span class="slider round"></span>
</label>
JS:
var checkedColor="red"; //the colors of the background
var uncheckedColor="blue" //the colors of the background
document.body.style.backgroundColor =uncheckedColor;//change the color at the begining to keep it consistent
function changeColor(){
if (document.getElementById("test").checked) { //if it is checked change to checkedColor
document.body.style.backgroundColor = checkedColor;
}
else {//if it is not checked change to uncheckedColor
document.body.style.backgroundColor =uncheckedColor;
}
}
document.getElementById("test").addEventListener('click', changeColor); //make the checkbox exeute the function test when being clicked
以下是一个工作示例:https://jsfiddle.net/25t64qha/