Bootstrap

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,其内容之一如下所示：

[css]  view plain  copy
  1. body {  
  2.   background: url("../images/skin_flower_branch.png");  
  3.   background-repeat: no-repeat;  
  4.   background-size: 100% 100%;  
  5.   background-attachment: fixed;  
  6. }  
  7.   
  8. .container {  
  9.   margin: 20% 20% 2% 10%;  
  10.   width: 500px;  
  11.   height: 100%;  
  12.   color: #4A8B0B;  
  13. }  
  14. .container input,textarea {  
  15.   background-color: #94c3aa;  
  16.   border: 1px solid;  
  17. }  

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

[javascript]  view plain  copy
  1. <script>  
  2.     window.onload = function () {  
  3.         var styles = document.getElementById('styles');  
  4.         var treeBranch = document.getElementById('treeBranch');  
  5.         var snowPartner = document.getElementById('snowPartner');  
  6.         var flowerBranch = document.getElementById('flowerBranch');  
  7.         treeBranch.onclick = function () {  
  8.             styles.href = './styles/foresttree.css';  
  9.             this.style.color = '#midnightblue';  
  10.         };  
  11.         snowPartner.onclick = function () {  
  12.             styles.href = './styles/snow_partner.css';  
  13.             this.style.color = '#8B4D61';  
  14.         };  
  15.         flowerBranch.onclick = function () {  
  16.             styles.href = './styles/flower_branch.css';  
  17.             this.style.color = '#4A8B0B';  
  18.         }  
  19.     }  
  20. </script>  

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

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>一键换肤功能</title>  
  6.     <link rel="stylesheet" href="./styles/foresttree.css" type="text/css" id="styles">  
  7.     <style>  
  8.         body {  
  9.             margin: 0;  
  10.             padding: 0;  
  11.         }  
  12.         .container td:nth-child(1) {  
  13.             text-align: right;  
  14.         }  
  15.         .container td:nth-child(2) {  
  16.             text-align: left;  
  17.         }  
  18.     </style>  
  19. </head>  
  20. <script>  
  21.     window.onload = function () {  
  22.         var styles = document.getElementById('styles');  
  23.         var treeBranch = document.getElementById('treeBranch');  
  24.         var snowPartner = document.getElementById('snowPartner');  
  25.         var flowerBranch = document.getElementById('flowerBranch');  
  26.         treeBranch.onclick = function () {  
  27.             styles.href = './styles/foresttree.css';  
  28.             this.style.color = '#midnightblue';  
  29.         };  
  30.         snowPartner.onclick = function () {  
  31.             styles.href = './styles/snow_partner.css';  
  32.             this.style.color = '#8B4D61';  
  33.         };  
  34.         flowerBranch.onclick = function () {  
  35.             styles.href = './styles/flower_branch.css';  
  36.             this.style.color = '#4A8B0B';  
  37.         }  
  38.     }  
  39. </script>  
  40. <body>  
  41.     <div>  
  42.         <span id="treeBranch" class="span-button">treeBranch</span>  
  43.         <span id="snowPartner" class="span-button">snowPartner</span>  
  44.         <span id="flowerBranch" class="span-button">flowerBranch</span>  
  45.     </div>  
  46.     <div class="container">  
  47.         <form>  
  48.             <table>  
  49.                 <tr>  
  50.                     <td><label for="username"> 请输入用户名:</label></td>  
  51.                     <td><input type="text" id="username" name="username" /></td>  
  52.                 </tr>  
  53.                 <tr>  
  54.                     <td><label for="pass">请输入密    码:</label></td>  
  55.                     <td><input type="text" id="pass" name="pass" /></td>  
  56.                 </tr>  
  57.                 <tr>  
  58.                     <td><label for="repass">请输入确认密码:</label></td>  
  59.                     <td><input type="text" id="repass"  name="repass" /></td>  
  60.                 </tr>  
  61.                 <tr>  
  62.                     <td><label for="male">请选择性别:</label></td>  
  63.                     <td>  
  64.                         <input type="radio" id="male"  name="sex" />男  
  65.                         <input type="radio" name="sex" />女  
  66.                     </td>  
  67.                 </tr>  
  68.                 <tr>  
  69.                     <td><label for="book"> 请选择爱好:</label></td>  
  70.                     <td><input type="checkbox" id="book"  name="like"/>读书  
  71.                         <input type="checkbox" name="like"/>看电影  
  72.                         <input type="checkbox" name="like"/>写博客  
  73.                         <input type="checkbox" name="like"/>看资料  
  74.                     </td>  
  75.                 </tr>  
  76.                 <tr>  
  77.                     <td><label for="phone">请输入联系方式:</label></td>  
  78.                     <td><input type="number" id="phone"  name="pass"/></td>  
  79.                 </tr>  
  80.                 <tr>  
  81.                     <td>请输入自我评价:</td>  
  82.                     <td><textarea rows="5" cols="21" name="writeSelf" placeholder="请输入..." id="writeSelf"></textarea></td>  
  83.                 </tr>  
  84.             </table>  
  85.         </form>  
  86.     </div>  
  87. </body>  
  88. </html>  
在浏览器中进行测试，我们能够通过按钮进行不同界面的切换，效果图之一如下所示：



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

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
基于SSM的农业信息管理系统 原创
Monkey测试必现ANR问题分析与解决
源代码编译安装
pcap_open 和 pcap_open_live
事务面试题这一篇就够了（知识点整合，超详细）
温湿度绝对含水量换算公式
相机demo的java部分
【手撕STL】二叉搜索树
微信小程序封装api请求步骤
二手车交易平台设计与实现-附源码83872
;