js更换背景图

最新推荐文章于 2023-02-15 18:12:42 发布

Protagonists

最新推荐文章于 2023-02-15 18:12:42 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/owc1874/article/details/80762373

这篇博客通过JavaScript代码展示了如何实现网页背景颜色的动态切换。当点击不同颜色的按钮时，网页背景会相应改变。具体实现包括为每个颜色按钮添加点击事件监听器，点击后更改body元素的背景颜色。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .set_bg_con{
            width: 440px;
            height: 40px;
            border: 1px solid #ddd;
            margin: 40px auto 0;
            background-color: #fff;
        }
        .set_text{
            line-height: 40px;
            float: left;
            margin: 2 20px 0 10px;
            color: #666;
        }
        .style1,.style2,.style3,.style4,.style5,.style6{
            width: 30px;
            height: 26px;
            margin: 8px 5px;
            background: gold;
            cursor: pointer;
            float: left;
        }
        .style1{
            background:#0181cc;
        }
        .style2{
            background:#00b9f1;
        }
        .style3{
            background:#ef8201;
        }
        .style4{
            background:#8fc320;
        }
        .style5{
            background:#e84191;
        }
        .style6{
            background:#ee87b4;
        }
    </style>

    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oBtn3 = document.getElementById('btn3');
            var oBtn4 = document.getElementById('btn4');
            var oBtn5 = document.getElementById('btn5');
            var oBtn6 = document.getElementById('btn6');
            var oBody = document.getElementById('body');

            oBtn1.onclick = function(){

                oBody.style.background = '#0181cc';
            }
            oBtn2.onclick = function(){

                oBody.style.background = '#00b9f1';
            }
            oBtn3.onclick = function(){

                oBody.style.background = '#ef8201';
            }
            oBtn4.onclick = function(){

                oBody.style.background = '#8fc320';
            }
            oBtn5.onclick = function(){

                oBody.style.background = '#ee87b4';
            }
            oBtn6.onclick = function(){

                oBody.style.background = '#0181cc';
            }

        }
    
    </script>
</head>
<body id="body">
    <div class="set_bg_con">
        <div class="set_text">请选择网页的背景色:</div>
        <div class="style1" id="btn1"></div>
        <div class="style2" id="btn2"></div>
        <div class="style3" id="btn3"></div>
        <div class="style4" id="btn4"></div>
        <div class="style5" id="btn5"></div>
        <div class="style6" id="btn6"></div>
    </div>
    
</body>
</html>