使用切换开关更改背景颜色

【问题标题】：Change background color using toggle switch使用切换开关更改背景颜色
【发布时间】：2018-10-09 17:52:51
【问题描述】： 

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

我在这里有点菜鸟，但我有这个切换开关，当我点击它时，我想将当前从红色变为黑色的整个身体背景更改。但由于某种原因，我的脚本不起作用。有人可以解释我做错了什么吗？

【问题讨论】：

  • 你应该试试：document.getElementsByName("checkbox")[0].onclick = function() {myFunction()};

标签： javascript html css


【解决方案1】：

您的代码存在的问题是单击事件未注册到复选框，因为您使用了错误的方法来获取元素。尝试使用 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>

【讨论】：

    【解决方案2】：

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

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

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

    其次，您应该在 checkbox 中添加名称 attribute，因为您选择了 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>

    【讨论】：

      【解决方案3】：

      这里是更新的代码，只是我添加了一个新的 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】：

        在我看来，另一个更干净的解决方案是使用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>

        【讨论】：

          【解决方案5】： 

          $(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;
}
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<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 type="checkbox" class="checkbox">
    <span class="slider"></span>
  </label><br>
  </body>
</html>

          检查上面的代码。

          【讨论】：

            猜你喜欢
            • 2017-08-19
            • 2011-03-05
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-02-10
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode