1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

通过按钮来改变页面调用的css文件实现页面风格的变化的尝试!

本帖由 pashan2005-12-22 发布。版面名称:前端开发

  1. pashan

    pashan New Member

    注册:
    2005-12-12
    帖子:
    11
    赞:
    0
    搞了一中午:confused: !没想到这段代码这么好用!:D

    大家来分享下!交流交流!:) 想请教会用cookies的朋友指点下怎么调用cookies!

    效果http://www.likechong.com/index.html

    主要代码:
    <link id=csss rel="stylesheet" type="text/css" href="skin/css.css">
    </head>

    <body>
    选择网站风格 <input type=button class="inputtj1" value="红红圣诞" onclick="document.all.csss.href='skin/css.css'"> <input type=button class="inputtj1" value="紫色浪漫" onclick="document.all.csss.href='skin/csszsd.css'"> <input type=button class="inputtj1" value="蓝色简约" onclick="document.all.csss.href='skin/cssold.css'">
     
  2. chinafla

    chinafla New Member

    注册:
    2005-12-06
    帖子:
    58
    赞:
    0
    不错 呵呵~ 有创意啊
    虽然不会 帮顶~ 用COOKIE来记录 用户默认风格吗?
     
  3. pashan

    pashan New Member

    注册:
    2005-12-12
    帖子:
    11
    赞:
    0
    是啊!还望指教!
     
  4. 小叶

    小叶 New Member

    注册:
    2005-09-04
    帖子:
    17,941
    赞:
    33
    不错。。晚上让老鬼换一个试试。。呵呵。。
     
  5. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    前段时间也看到一段关于这个功能的脚本,不过要繁琐多了。可以借鉴一下。

    Head 区域:
    代码:
    <link rel="stylesheet" type="text/css" href="paul.css" title="bog standard" />
    <link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" />
    <script type="text/javascript" src="styleswitcher.js"></script>
    控制部分:
    代码:
    <a href="#" onclick="setActiveStyleSheet('default');return false;">change style to default</a>
    <a href="#" onclick="setActiveStyleSheet('paul');return false;">change style to paul</a>
    styleswitcher.js
    PHP:
    function setActiveStyleSheet(title) {
      var 
    iamain;
      for(
    i=0; (document.getElementsByTagName("link")[i]); i++) {
        if(
    a.getAttribute("rel").indexOf("style") != -&& a.getAttribute("title")) {
          
    a.disabled true;
          if(
    a.getAttribute("title") == titlea.disabled false;
        }
      }
    }
     
    function 
    getActiveStyleSheet() {
      var 
    ia;
      for(
    i=0; (document.getElementsByTagName("link")[i]); i++) {
        if(
    a.getAttribute("rel").indexOf("style") != -&& a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
      }
      return 
    null;
    }
     
    function 
    getPreferredStyleSheet() {
      var 
    ia;
      for(
    i=0; (document.getElementsByTagName("link")[i]); i++) {
        if(
    a.getAttribute("rel").indexOf("style") != -1
           
    && a.getAttribute("rel").indexOf("alt") == -1
           
    && a.getAttribute("title")
           ) return 
    a.getAttribute("title");
      }
      return 
    null;
    }
     
    function 
    createCookie(name,value,days) {
      if (
    days) {
        var 
    date = new Date();
        
    date.setTime(date.getTime()+(days*24*60*60*1000));
        var 
    expires "; expires="+date.toGMTString();
      }
      else 
    expires "";
      
    document.cookie name+"="+value+expires+"; path=/";
    }
     
    function 
    readCookie(name) {
      var 
    nameEQ name "=";
      var 
    ca document.cookie.split(';');
      for(var 
    i=0;ca.length;i++) {
        var 
    ca[i];
        while (
    c.charAt(0)==' 'c.substring(1,c.length);
        if (
    c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return 
    null;
    }
     
    window.onload = function(e) {
      var 
    cookie readCookie("style");
      var 
    title cookie cookie getPreferredStyleSheet();
      
    setActiveStyleSheet(title);
    }
     
    window.onunload = function(e) {
      var 
    title getActiveStyleSheet();
      
    createCookie("style"title365);
    }
     
    var 
    cookie readCookie("style");
    var 
    title cookie cookie getPreferredStyleSheet();
    setActiveStyleSheet(title);
     
  6. pashan

    pashan New Member

    注册:
    2005-12-12
    帖子:
    11
    赞:
    0
    :) 有没有只用javascript代码来控制COOKIE记录用户选择的风格!在线时有效就行!
     
  7. pashan

    pashan New Member

    注册:
    2005-12-12
    帖子:
    11
    赞:
    0
    谢谢!"不学无术"给的代码!果然不错!我放上去,测试了下真的有效果!可以用 COOKIE记录并保持用户选择的风格,

    其中控制部分的onclick="setActiveStyleSheet('paul');return 中的paul要对应Head 区域的 title="
     
  8. chinafla

    chinafla New Member

    注册:
    2005-12-06
    帖子:
    58
    赞:
    0
    希望还是有人把COOKIES写出来~~~
     
  9. chinafla

    chinafla New Member

    注册:
    2005-12-06
    帖子:
    58
    赞:
    0
    晕 顶
    谁来把一楼代码的COOKIE写出来啊?
     
  10. 小叶

    小叶 New Member

    注册:
    2005-09-04
    帖子:
    17,941
    赞:
    33
    以前蓝色理想的那个flash可以变化。。
    不学猪就是厉害,,嬲。。
     
  11. zouql

    zouql New Member

    注册:
    2005-11-27
    帖子:
    312
    赞:
    4
    不错!有空玩玩
     
  12. pashan

    pashan New Member

    注册:
    2005-12-12
    帖子:
    11
    赞:
    0
    我后来改用的就是5楼"不学无术" 贴的代码啊!可以用 COOKIE记录并保持用户选择的风格!你到我站上看看就知道!
    http://www.likechong.com
    现在有四种风格!:)
     
    #12 pashan, 2005-12-23
    最后编辑: 2005-12-23