本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did124507