javascript核心技术（三十四）节点操作案例(一) 动态改变网页的背景颜色

人亦已歌 · 发表于 2023-1-26 22:06:26

本案例要实现的是：
点击按钮后改变网页的背景颜色，在案例中我们使用了两种方式实现。
一、通过修改body标签的类名实现。
二、通过给body标签设置css样式实现。

通过上面的提示，大家应该可以自己做出来，请先试试看，实在无法解决再看以下的代码。

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>动态改变网页的背景颜色</title>
        <style type="text/css">
                .cls{
                        background-color: black;
                }
        </style>
</head>
<body class="" id="body">
<input type="button" value="开关" id="btn">

<script type="text/javascript">
        // 网页开关灯效果实现（设置整个页面的背景色）（样式操作/class类名操作）
        //类名操作 给body 添加和移除类名

        //获取按钮
        var btn = document.getElementById('btn');
        //给按钮绑定点击事件
        btn.onclick = function(){
                //事件处理函数中，控制body标签的class类名---如果有cls类名则删除，没有就加上
                //获取body标签
                // var body = document.getElementById('body');
                var body = document.body;
                // console.log(body);
                // 方式1 类名操作
                // if(body.className == ''){
                //         // 如果没有类名则添加类名
                //         body.className = 'cls';
                // }else{
                //         // 如果有cls类名则删除
                //         body.className = '';
                // }
                //方式2 样式操作
                if(body.style.backgroundColor == ''){
                        // 如果没有背景色则添加
                        body.style.backgroundColor = 'black';
                }else{
                        // 如果有背景色则去掉背景色
                        body.style.backgroundColor = '';
                }
        }
</script>

</body>
</html>