网页开关灯

最新推荐文章于 2022-06-07 22:49:58 发布

广东话的蛇皇

最新推荐文章于 2022-06-07 22:49:58 发布

阅读量964

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104236911

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

网页开关灯

DOM版

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style type="text/css">
		.cls{
			background-color: rgba(0,0,0,1);
		}
	</style>
</head>
<body>
	<input type="button" value="开/关灯" id="btn">
	<script type="text/javascript">
		document.getElementById("btn").onclick = function () {
			document.body.className = document.body.className !="cls"?"cls":"";
		}
	</script>
</body>
</html>

jQuery版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .light{
      background-color: black;
    }
  </style>
</head>
<body>
<input type="button" value="开关" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>

  $("#btn").click(function () {
    //判断body标签是否应用了cls的类样式
    if($("body").hasClass("light")){
      //此处应用了cls类样式,那么就移除这个类样式
      $("body").removeClass("light");
    }else{
      //此处没有应用类样式cls,那么就添加类样式
      $("body").addClass("light");
    }
  });

//  $("#btn").click(function () {
//    if($("body")[0].className=="cls"){
//      $("body")[0].className="";
//    }else{
//      $("body")[0].className="cls";
//    }
//  });
</script>

</body>
</html>

另一个版本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>

  //表单标签DOM操作中设置和获取value属性的值---->对象.value
  //jQuery中:
  /*
  *
  * jQuery对象.val();-------表示的是获取该元素的value属性值
  * jQuery对象.val("值");----表示的是设置该元素的value属性
  * jQuery对象.css("css的属性名字","属性的值");---->设置元素的样式属性值
  * 注意:
  * .css("属性","值");属性的写法可以是DOM操作中的js写法,也可以是css中的写法
  *
  *
  * */
  //根据id属性值获取按钮,注册点击事件(添加点击事件,调用点击事件的方法)
  $("#btn").click(function () {
    //判断这个按钮的值来修改body的样式
    //此处的this是当前的按钮DOM对象
    //判断按钮的value值是不是关灯
    if($(this).val()=="关灯"){
      //修改body的背景颜色
      $("body").css("backgroundColor","black");
      $(this).val("开灯");
    }else{
      $("body").css("backgroundColor","");
      $(this).val("关灯");
    }
  });

//  $("#btn").click(function () {
//    //获取按钮的value属性值
//    //console.log($(this).val());
//
//    $(this).val("哈哈,我又变帅了");
//  });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      background-color: black;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
//    $(function () {
//      $("#btn").click(function () {
//        //判断body是否应用了cls类样式,如果应用了就移除,否则就添加
//        if($("body").hasClass("cls")){
//          $("body").removeClass("cls");
//        }else{
//          $("body").addClass("cls");
//        }
//      });
//    });

    //第二种方式
    $(function () {
      $("#btn").click(function () {
        //切换---类样式
        $("body").toggleClass("cls");
      });
    });
  </script>
</head>
<body>
<input type="button" value="开/关" id="btn"/>


</body>
</html>