JavaScript dom click使用控制开关

最新推荐文章于 2025-10-28 15:44:37 发布

原创最新推荐文章于 2025-10-28 15:44:37 发布 · 586 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #前端

本文详细介绍了如何使用JavaScript的DOM操作，结合click事件来实现界面中的开关控制功能。通过监听元素的点击事件，动态改变元素的样式或属性，从而达到开关切换的效果。无论是控制显示隐藏、切换状态还是触发其他交互，JavaScript的click事件都能灵活应对。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="body">
	//在线表白林祤环的第二天
    <button id="btn">按钮变色</button>
    <script>
    //这段代码和   开关灯 代码原理是一样的 可以借鉴使用
        var body =document.getElementById("body");
        var btn = document.getElementById("btn");
     
        var flag = true; 
        //假设一个布尔变量 用于等下判断用
        btn.onclick = function() {
            if(flag) {
                body.style.backgroundColor = "black";
                flag = false;
               /*这段代码的走动是 判断flag  然后进入if代码块  当运行到
              body.style.backgroundColor = "black";  此时背景变 黑色   
                我们在给  flag赋值 false  就会进入 else 运行 */
            } else {
                body.style.backgroundColor = "transparent";
                flag = true;
            }
        }
    </script>
</body>
</html>