使用拨动开关更改背景颜色

时间：2018-10-08 03:20:35

标签： javascript html css 

<script>
document.getElementsByName("checkbox").onclick = function() {myFunction()};

function myFunction() {
    document.body.style.backgroundColor = "black";
}
</script>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

body {
	background-color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

body {
	background-color: red;
}
</style>
<meta charset="utf-8">
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label><br>

<script>
document.getElementsByName("checkbox").onclick = function() {myFunction()};

function myFunction() {
    document.body.style.backgroundColor = "black";
}
</script>
</body>
</html>

我在这里有点菜鸟，但是我有一个拨动开关，我想将整个背景更改为当前背景，当我单击它时，该背景从红色变为黑色。但是由于某种原因，我的脚本无法正常工作。有人可以解释我在做什么错吗？

5 个答案:

答案 0 :(得分：4)

您的代码存在的问题是click事件未在复选框中注册，因为您使用了错误的方法来获取元素。尝试使用ID代替getElementById。下面是一个解决方案。希望这会有所帮助。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    .switch input {
      display: none;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    input:checked+.slider {
      background-color: #2196F3;
    }
    
    input:focus+.slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked+.slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    
    body {
      background-color: #BB9797;
    }
  </style>
  <meta charset="utf-8">
</head>

<body>

  <h2>Toggle Switch</h2>

  <label class="switch">
  <input id="toggleSwitch" type="checkbox">
  <span class="slider"></span>
</label><br>

  <script>
    document.getElementById("toggleSwitch").onclick = function() {
      myFunction()
    };

    function myFunction() {
      let color = document.body.style.background;
      if (color === 'black') {
        document.body.style.background = "#BB9797";
      } else {
        document.body.style.background = "black";
      }

    }
  </script>
</body>

</html>

答案 1 :(得分：3)

您应该在此处进行2项更改：

首先，在键入document.getElementsByName("checkbox")[0]时应添加数组索引号，因为getElementsByName返回数组：

document.getElementsByName("checkbox")[0].onclick = function() {myFunction()};

第二，您应该在attribute中添加名称checkbox，因为您是通过getElementsByName选择元素的，但是元素中不存在该元素：

<label class="switch">
  <input type="checkbox" name="checkbox">
   <span class="slider"></span>
</label>


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

body {
	background-color: #BB9797;
}
</style>
<meta charset="utf-8">
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox" name="checkbox">
  <span class="slider"></span>
</label><br>

<script>
var checkbox = document.getElementsByName("checkbox")[0];
checkbox.onclick = function() {myFunction()};

function myFunction() {
	if(checkbox.checked) { document.body.style.backgroundColor = "black";}
	else {document.body.style.backgroundColor = "#BB9797";}
}
</script>
</body>
</html>

答案 2 :(得分：1)

在我看来，另一种更干净的解决方案是使用classList.toggle在body元素上切换类。这样，如果您需要重新设计颜色，则无需更改任何代码。只需更改CSS。

document.getElementById("toggleSwitch").onclick = function() { myFunction() };

function myFunction() {
	document.body.classList.toggle("switch-on");
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.switch-on {
  background-color: black;
}

body {
  background-color: #BB9797;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input id="toggleSwitch" type="checkbox">
  <span class="slider"></span>
</label><br>

</body>
</html>

答案 3 :(得分：0)

这里更新的代码只是我添加了一个新的ID和功能，请检查此解决方案，我认为它将为您服务

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

body {
	background-color: red;
}
</style>
<meta charset="utf-8">
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input id="toggleSwitch" type="checkbox">
  <span class="slider"></span>
</label><br>
<script>
    document.getElementById("toggleSwitch").onclick = function() {
      myFunction()
    };

    function myFunction() {
      let color = document.body.style.background;
      if (color === 'black') {
        document.body.style.background = "red";
      } else {
        document.body.style.background = "black";
      }

    }
</script>
</body>
</html>

答案 4 :(得分：0)

./byfn.sh -m up -s couchdb -a

$(document).ready(function(){
  $('.checkbox').on('click', function(){
    $('body').toggleClass('change');
  });
});
body.change{
  background-color: black;
  color: #ffffff;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
} 

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
} 

 input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

body {
	background-color: red;
}

检查上面的代码。

相关问题
最新问题