<!DOCTYPE html> <html lang="zh"> <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>换肤加导航栏</title> <style type="text/css"> /*排他思想写换肤*/ /*导航栏二级下拉菜单*/ *{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; margin: 0 auto; } #main{ width:800px; height: 60px; position: relative; } #nav{ width: 800px; height: 60px; background-color: paleturquoise; position: absolute; left: 50%; margin-left: -400px; top: 60px; /*margin-left: -300px;*/ } #na{ width: 100px; text-align: center; } .a{ border: 1px solid deeppink; width: 100px; display: block; height:30px; line-height: 30px; } #na ul{ height: 0px; overflow: hidden; } #nav div{ float: left; margin-left: 20px; } #huanfu{ position: absolute; top: 20px; } #huanfu button{ width: 20px; height: 20px; border-radius: 50%; } .btn_blue{ background-color: blue; } .btn_green{ background-color: green; } .btn_red{ background-color: red; } </style> </head> <body> <div id="main"> <div id="huanfu" class="huanfu"> <button onclick="color('red')" class="btn_red"><!-- --><!--style="background-color: red;"--></button> <button onclick="color('green')" class="btn_green" > <!----><!--style="background-color: green;"--></button> <button onclick="color('blue')" class="btn_blue"><!----> <!--style="background-color: blue;"--></button> </div> <div id="nav" class="nav"> <div id="na"> <a href="#" class="a">首页</a> <ul> <li>我的淘宝</li> <li>我的收藏</li> <li>浏览历史</li> </ul> </div> <div id="na"> <a href="#" class="a">首页</a> <ul> <li>我的淘宝</li> <li>我的收藏</li> <li>浏览历史</li> </ul> </div> </div> </div> <script type="text/javascript"> var navdiv=document.getElementsByClassName('nav')[0].getElementsByTagName('div'); var navul=document.getElementsByClassName('nav')[0].getElementsByTagName('ul'); // var red=document.getElementsByTagName() // var btns=document.getElementsByClassName('huanfu').getElementsByTagName('button'); for(var i=0;i<navdiv.length;i++){ (function(j){ navdiv[j].onmouseover=function(){ navul[j].style.height=120+"px"; } navdiv[j].onmouseout=function(){ navul[j].style.height=0+"px"; } })(i); } //传参方法 function color(color){ var bo=document.body; var nav=document.getElementById('nav'); bo.style.backgroundColor=color; nav.style.backgroundColor='pink'; } </script> </body> </html>