HTML中如何实现更换网页皮肤

 

HTML中如何实现更换网页皮肤

标签： html javascript

2017年10月22日 22:02:29 191人阅读  评论(0)  收藏  举报

  分类：

JavaScript（31）   HTML（15） 

版权声明：本文为博主原创文章，若需转载，请注明出处：http://blog.csdn.net/suwu150 http://blog.csdn.net/suwu150/article/details/78313803

在QQ空间中或者其他网站中有很多一键换肤的功能，今天也进行实现一个简单的换肤功能。

1.实现思路

    在实现换肤功能时，我们应该注意到，大部分换肤功能页面中的内容是没有发生变化的，变化的只是背景样式的改变，有的页面中组件位置的调整，所以，实现只需要对同一个页面进行不同样式的替换即可，也就是说，我们有多少皮肤，就得有多少样式。

2.具体实现

首先，我们需要进行准备一个固定的html页面，命名为index.html,其内容如下所示：

同时，我们需要三套css样式，分别命名为flower_branch.css，foresttree.css，snow_partner.css,其内容之一如下所示：

body {
  background: url("../images/skin_flower_branch.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.container {
  margin: 20% 20% 2% 10%;
  width: 500px;
  height: 100%;
  color: #4A8B0B;
}
.container input,textarea {
  background-color: #94c3aa;
  border: 1px solid;
}

这样，当我们进行点击index.html中的按钮进行换肤操作的时候，我们就进行样式的替换，下面是实现代码javaScript：

  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">    window.onload = <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">function</span><span style="border:none;"> () {  </span></span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">var</span><span style="border:none;"> styles = document.getElementById(</span><span class="string" style="border:none;color:rgb(0,0,255);">'styles'</span><span style="border:none;">);  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">var</span><span style="border:none;"> treeBranch = document.getElementById(</span><span class="string" style="border:none;color:rgb(0,0,255);">'treeBranch'</span><span style="border:none;">);  </span></span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">var</span><span style="border:none;"> snowPartner = document.getElementById(</span><span class="string" style="border:none;color:rgb(0,0,255);">'snowPartner'</span><span style="border:none;">);  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">var</span><span style="border:none;"> flowerBranch = document.getElementById(</span><span class="string" style="border:none;color:rgb(0,0,255);">'flowerBranch'</span><span style="border:none;">);  </span></span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        treeBranch.onclick = <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">function</span><span style="border:none;"> () {  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">            styles.href = <span class="string" style="border:none;color:rgb(0,0,255);">'./styles/foresttree.css'</span><span style="border:none;">;  </span></span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">            <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">this</span><span style="border:none;">.style.color = </span><span class="string" style="border:none;color:rgb(0,0,255);">'#midnightblue'</span><span style="border:none;">;  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        };  </span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        snowPartner.onclick = <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">function</span><span style="border:none;"> () {  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">            styles.href = <span class="string" style="border:none;color:rgb(0,0,255);">'./styles/snow_partner.css'</span><span style="border:none;">;  </span></span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">            <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">this</span><span style="border:none;">.style.color = </span><span class="string" style="border:none;color:rgb(0,0,255);">'#8B4D61'</span><span style="border:none;">;  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        };  </span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        flowerBranch.onclick = <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">function</span><span style="border:none;"> () {  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">            styles.href = <span class="string" style="border:none;color:rgb(0,0,255);">'./styles/flower_branch.css'</span><span style="border:none;">;  </span></span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">            <span class="keyword" style="border:none;color:rgb(0,102,153);font-weight:700;">this</span><span style="border:none;">.style.color = </span><span class="string" style="border:none;color:rgb(0,0,255);">'#4A8B0B'</span><span style="border:none;">;  </span></span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">        }  </span></li> 
      <li class="alt" style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);color:inherit;line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">    }  </span></li> 
      <li style="border-top:none;border-right:none;border-bottom:none;border-left:3px solid rgb(108,226,108);line-height:18px;list-style-position:outside;"><span style="border:none;color:rgb(0,0,0);">

有了这些准备工作之后，我们就可以进行实际操作了，最后完成的页面如下所示：

>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一键换肤功能title>
    <link rel="stylesheet" href="./styles/foresttree.css" type="text/css" id="styles">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container td:nth-child(1) {
            text-align: right;
        }
        .container td:nth-child(2) {
            text-align: left;
        }
    style>
head>
<script>
    window.onload = function () {
        var styles = document.getElementById('styles');
        var treeBranch = document.getElementById('treeBranch');
        var snowPartner = document.getElementById('snowPartner');
        var flowerBranch = document.getElementById('flowerBranch');
        treeBranch.onclick = function () {
            styles.href = './styles/foresttree.css';
            this.style.color = '#midnightblue';
        };
        snowPartner.onclick = function () {
            styles.href = './styles/snow_partner.css';
            this.style.color = '#8B4D61';
        };
        flowerBranch.onclick = function () {
            styles.href = './styles/flower_branch.css';
            this.style.color = '#4A8B0B';
        }
    }
script>
<body>
    <div>
        <span id="treeBranch" class="span-button">treeBranchspan>
        <span id="snowPartner" class="span-button">snowPartnerspan>
        <span id="flowerBranch" class="span-button">flowerBranchspan>
    div>
    <div class="container">
        <form>
            <table>
                <tr>
                    <td><label for="username"> 请输入用户名:label>td>
                    <td><input type="text" id="username" name="username" />td>
                tr>
                <tr>
                    <td><label for="pass">请输入密    码:label>td>
                    <td><input type="text" id="pass" name="pass" />td>
                tr>
                <tr>
                    <td><label for="repass">请输入确认密码:label>td>
                    <td><input type="text" id="repass"  name="repass" />td>
                tr>
                <tr>
                    <td><label for="male">请选择性别:label>td>
                    <td>
                        <input type="radio" id="male"  name="sex" />男
                        <input type="radio" name="sex" />女
                    td>
                tr>
                <tr>
                    <td><label for="book"> 请选择爱好:label>td>
                    <td><input type="checkbox" id="book"  name="like"/>读书
                        <input type="checkbox" name="like"/>看电影
                        <input type="checkbox" name="like"/>写博客
                        <input type="checkbox" name="like"/>看资料
                    td>
                tr>
                <tr>
                    <td><label for="phone">请输入联系方式:label>td>
                    <td><input type="number" id="phone"  name="pass"/>td>
                tr>
                <tr>
                    <td>请输入自我评价:td>
                    <td><textarea rows="5" cols="21" name="writeSelf" placeholder="请输入..." id="writeSelf">textarea>td>
                tr>
            table>
        form>
    div>
body>
html>

在浏览器中进行测试，我们能够通过按钮进行不同界面的切换，效果图之一如下所示：

下面是源代码链接地址：喜欢的请下载查看具体代码：一键换肤