js 来回切换案例

最新推荐文章于 2023-10-15 23:00:40 发布

m0_58314198

最新推荐文章于 2023-10-15 23:00:40 发布

阅读量200

点赞数

分类专栏： js DOM基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_58314198/article/details/123942149

版权

js DOM基础专栏收录该内容

1 篇文章

订阅专栏

这是一个简单的HTML页面，实现点击按钮切换页面背景颜色的功能。页面背景初始为黑色，按钮文字默认为'关灯'，点击后变为'开灯'，同时背景色在黑色和非黑色之间切换。该示例涉及JavaScript的DOM操作和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
        .body {
            background-color: black;
        }
    </style>
</head>

<body>
    <button>关灯</button>
    <script>
        let v = true
        let a = document.querySelector('button')
        a.onclick = function () {
            document.body.classList.toggle('body')
            if (v == true) {
                a.innerText = '开灯'
                v = false
            }
            else {
                a.innerText = '关灯'
                v = true
            }
        }
    </script>
</body>

</html>