欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现开关等效果

程序员文章站 2022-05-14 19:00:38
废话不多说了,直接给大家贴代码了,具体代码如下所示: &l...

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>开关灯</title>
 <style type="text/css">
  html, body {
   margin: 0px;
   padding: 0px;
   width: 100%;
   height: 100%;
   cursor: pointer;
   background-color: white;
  }
 </style>
</head>
<body id="bodyele">
<script type="text/javascript">
 var obody = document.getelementbyid("bodyele");
 obody.onclick = function () {
  var bg = this.style.backgroundcolor;
  switch (bg) {
   case "white":
    this.style.backgroundcolor = "red";
    break;
   case "red":
    this.style.backgroundcolor = "black";
    break;
   default:
    this.style.backgroundcolor = "white";
  }

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

总结

以上所述是小编给大家介绍的javascript实现开关等效果,希望对大家有所帮助