改变网页颜色

    xiaoxiao2022-07-12  163

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

    <!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>

    效果图:

                            

                            

                            

    最新回复(0)