JavaScript - 17.开关灯的小案例 - 《javascript》

不能插入mp4格式，这里我们简单描述一下，需要做的效果

页面中有一个按钮，通过点击按钮，改变body的背景颜色。这里用红色替代了白色

17.开关灯的小案例 - 图1 17.开关灯的小案例 - 图2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>开关灯小案例</title>
    <!-- IMPORT CSS -->
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        button {
            padding: 0 20px;
            line-height: 35px;
        }
    </style>
</head>
<body style="background-color: white;">
    <button id="lampBtn">关灯</button>
    <!-- IMPORT JS -->
    <script>
        /* 
         * 要实现的思路和功能
         *   1.默认页面是白色的（开灯状态），按钮显示的文字是关灯
         *   2.点击按钮
         *     1）获取当前开关灯的状态（看BODY的背景颜色）
         *     2）如果当前是开灯状态（BODY的背景颜色是白色），我们让BODY背景
         * 颜色变为黑色（关灯状态），按钮中显示开灯
         *     3）如果当前是关灯状态（BODY的背景颜色是黑色），我们让BODY背景
         * 颜色变为白色（开灯状态），按钮中显示关灯
         */
        //  1.想要操作谁就先获取谁 BODY和按钮
        let lampBtn = document.getElementById('lampBtn'); //=>获取按钮
        let body = document.body; //=>获取BODY
        // 2.事件绑定：点击按钮的时候做什么事情
        lampBtn.onclick = function () {
            /* 元素.style.xxx=xxx：设置元素的行内样式，元素.style.xxx 不赋值的情况下是获取元素的行内样式（注意是行内样式：不管在哪设置的样式，只要不是在行内上设置，都获取不到） */
            // 获取BODY的背景颜色
            let bg = body.style.backgroundColor;
            if (bg === 'white') {
                // 当前处于开灯状态
                body.style.backgroundColor = "black";
                lampBtn.innerText = "开灯";
            } else {
                // 当前处于关灯状态
                body.style.backgroundColor = "white";
                lampBtn.innerText = "关灯";
            }
        };
    </script>
</body>
</html>