js案例---开关灯效果

最新推荐文章于 2022-12-07 20:13:48 发布

兰兰的小窝

最新推荐文章于 2022-12-07 20:13:48 发布

阅读量634

点赞数 1

分类专栏： # js

本文链接：https://blog.csdn.net/pilgrim_121/article/details/113487966

版权

js 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

在这里插入图片描述

实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .current {
            background-color: black;
        }
    </style>
</head>


<body>
    <input type="button" value="开关" id="btn">
    <script>
        var btn = document.querySelector('#btn');
        var flag = false;
        btn.addEventListener('click', function() {
            if (flag) { //当flag为true时，表示开灯
                // document.body.style.backgroundColor = '';
                document.body.className = '';
                flag = false;
            } else { //当flag为false时，表示关灯
                document.body.className = 'current';
                // document.body.style.backgroundColor = 'black';
                flag = true;
            }

            //或者直接使用 切换类：element.classList.toggle（‘类名’）
            // document.body.classList.toggle('current');

        })
    </script>
</body>

</html>

兰兰的小窝

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
js案例---开关灯效果

实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .current { .
复制链接

扫一扫