js按钮开关灯小案例（点击按钮背景颜色内容转换）

最新推荐文章于 2022-06-27 13:41:07 发布

全栈哥

最新推荐文章于 2022-06-27 13:41:07 发布

阅读量2.1k

点赞数 5

文章标签： javascript js html css html5

本文链接：https://blog.csdn.net/weixin_45631722/article/details/107290399

版权

点击按钮切换开灯和关灯

css代码

<style>
        body {
            background-color: aqua;
        }
        
        p {
            color: red;
            margin-top: 50px;
            text-align: center;
        }
    </style>

html和js代码

<body>
    <button id="btn">开关灯</button>
    <script>
        var btn = document.getElementById('btn');
        var body = document.querySelector('body');
        var flag = 0;
        btn.onclick = function() {
            if (flag == 0) {
                body.style.backgroundColor = '#000';
                flag = 1;
            } else {
                body.style.backgroundColor = '#fff';
                flag = 0;
            }
        }
    </script>
</body>