改变网页颜色

最新推荐文章于 2023-09-04 07:59:22 发布

kelokole

最新推荐文章于 2023-09-04 07:59:22 发布

阅读量880

点赞数 3

本文链接：https://blog.csdn.net/qq_44254672/article/details/90483130

版权

编程目的是点击不同颜色按钮，网页背景颜色也发生相应变化

<!DOCTYPE html>
<html>
    <head>
        <title>网页换肤</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; }
            body{ width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.514); }
            #linklist{ width: 69px; height: 15px; margin: 30px 350px 10px 330px; }
            #linklist div{ width: 11px; height: 11px; border: 2px solid #333333; border-radius: 100%; margin-left: 4px; margin-right: 4px; float: left; cursor: pointer;}
            #app2{ width: 540px; height: 32px; list-style-type: none; margin: 0px auto;}
            #app2 li{ width: 90px; height: 32px; background-color: rgba(255, 0, 0, 0.514); float: left; }
            #app2 a{ width: 86px; height: 28px; display: inline-block; border: 2px solid #ffffff; 
                color: #ffffff; text-decoration: none; line-height: 28px; text-align: center; }
        </style>
    </head>
    <body>
        <div id="linklist">
            <div style="background-color: rgba(255, 0, 0, 0.514);"></div>
            <div style="background-color: rgba(0, 132, 255, 0.514);"></div>
            <div style="background-color: rgba(72, 255, 0, 0.514);"></div>
        </div>
        <ul id="app2">
            <li><a href="#">新闻</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">旅游</a></li>
        </ul>

        <script type="text/javascript">
            window.onload = function(){
                // 获取元素
                var licolor = document.getElementById("app2").getElementsByTagName("li");
                var linkpoint = document.getElementById("linklist").getElementsByTagName("div");
                // 遍历点击事件
                for(var i = 0; i < linkpoint.length; i++){
                    linkpoint[i].onclick = function(){
                        // 进行颜色改变的操作
                        var strcolor = this.style.backgroundColor;
                        document.body.style.backgroundColor = strcolor;
                        for(var j = 0; j < licolor.length; j++){
                            licolor[j].style.backgroundColor = strcolor;
                        }
                    }
                }
            }
        </script>
    </body>
</html>

效果图：

kelokole

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
改变网页颜色

编程目的是点击不同颜色按钮，网页背景颜色也发生相应变化<!DOCTYPE html><html> <head> <title>网页换肤</title> <style type="text/css"> *{ margin: 0px; padding: 0px...
复制链接

扫一扫