js实现网页换肤

本文实例为大家分享了js实现网页换肤的具体代码,供大家参考,具体内容如下

效果:

代码:

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <style type="text/css">             *{                 margin: 0px;                 padding: 0px;             }             body{                 height: 100%;                 width: 100%;             }             #main{                 height: 720px;                 width: 100%;                 background-color: pink;             }             button{                 height: 15px;                 width: 15px;                 border: 1px solid #fff;                 margin: 10px 10px;             }             #red{                 background-color: red;             }             #green{                 background-color: green;             }             #blue{                 background-color: blue;             }         </style>     </head>     <body>         <div id="main">             <button type="button" id="red" onclick="red()"></button>             <button type="button" id="green" onclick="green()"></button>             <button type="button" id="blue" onclick="blue()"></button>         </div>         <script type="text/javascript">             var x=document.getElementById('main');             function red(){                 x.style.backgroundColor='red';                 document.getElementById('red').style.border="3px solid white";                 document.getElementById('green').style.border="1px solid white";                 document.getElementById('blue').style.border="1px solid white";             }             function green(){                 x.style.backgroundColor='green';                 document.getElementById('green').style.border="3px solid white";                 document.getElementById('red').style.border="1px solid white";                 document.getElementById('blue').style.border="1px solid white";             }             function blue(){                 x.style.backgroundColor='blue';                 document.getElementById('blue').style.border="3px solid white";                 document.getElementById('red').style.border="1px solid white";                 document.getElementById('green').style.border="1px solid white";             }         </script>     </body> </html>

推荐阅读