JS 开关灯实验

一夕ξ

已于 2022-02-20 12:36:10 修改

阅读量248

点赞数

分类专栏：前端学习文章标签： javascript 前端 ecmascript

于 2022-02-20 11:50:18 首次发布

本文链接：https://blog.csdn.net/qq_45387575/article/details/123028903

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

主要练习如何获取body元素

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .right {
            background-color: white;
        }
        
        .offri {
            background-color: black;
        }
    </style>
</head>

<body class=''>
    <button class="on">开灯</button>
    <button class="ofsf">关灯</button>

    <script>
        var on = document.querySelector('.on')
        var ofsf = document.querySelector('.ofsf')

        var body = document.body
        on.onclick = function() {
            body.className = 'right'
        }
        ofsf.onclick = function() {
            body.className = 'right offri'

        }
    </script>
</body>

</html>

一个按键实现两种效果：

    <script>
        var on = document.querySelector('.on')
        var body = document.body
        var flag = 0
        on.onclick = function() {
            if (flag == 0) {
                body.className = 'right'
                flag = 1
            } else {
                flag = 0
                body.className = 'right offri'
            }
        }
    </script>

一夕ξ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS 开关灯实验

主要练习如何获取body元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0..
复制链接

扫一扫