如何实现用JS无刷新切换页面风格?

如何实现用JS无刷新切换页面风格?有没有类似的例子?

解决方案 »

  1.   

    应该通过动态修改css属性就行了吧？
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>css+javascript实时切换风格皮肤，并存入cookie</title> 
    <style type="text/css"> 
    .themes{border:1px solid #000;} 
    </style> 
    <script language="javascript" type="text/javascript"> 
    <!-- 
    var arrCSS=[ 
        ["<img src='ocean.gif' width='8' height='8' class='themes' alt='Ocean'>","ocean.css"], 
        ["<img src='tangerine.gif' width='8' height='8' class='themes' alt='Tangerine'>","tangerine.css"], 
        ["<img src='violet.gif' width='8' height='8' class='themes' alt='Violet'>","violet.css"], 
        ["<img src='oyster.gif' width='8' height='8' class='themes' alt='Oyster'>","oyster.css"], 
        ["<img src='grass.gif' width='8' height='8' class='themes' alt='Grass'>","grass.css"], 
        "" 
        ]; 
    // *** function to replace href="#" *** 
    function v(){ 
        return; 
    } // *** Cookies *** 
    function writeCookie(name, value) {  
        exp = new Date();  
        exp.setTime(exp.getTime() + (86400 * 1000 * 30)); 
        document.cookie = name + "=" + escape(value) + "; expires=" + exp.toGMTString() + "; path=/";  
    }  
    function readCookie(name) {  
        var search;  
        search = name + "=";  
        offset = document.cookie.indexOf(search);  
        if (offset != -1) {  
            offset += search.length;  
            end = document.cookie.indexOf(";", offset);  
            if (end == -1){ 
                end = document.cookie.length; 
            } 
            return unescape(document.cookie.substring(offset, end));  
        }else{ 
            return ""; 
        } 
    } 
    //////////////////////////////////// 
    // StyleSheet 
    //////////////////////////////////// 
    function writeCSS(){ 
      for(var i=0;i<arrCSS.length;i++){ 
        document.write('<link title="css'+i+'" href="'+arrCSS[i][1]+'" rel="stylesheet" disabled="true" type="text/css" />'); 
      } 
        setStyleSheet(readCookie("stylesheet")); 
    } function writeCSSLinks(){ 
      for(var i=0;i<arrCSS.length-1;i++){ 
        if(i>0) document.write('  '); 
        document.write('<a href="javascript:v()" onclick="setStyleSheet(\'css'+i+'\')">'+arrCSS[i][0]+'</a>'); 
      } 
    } function setStyleSheet(strCSS){ 
      var objs=document.getElementsByTagName("link"); 
      var intFound=0; 
      for(var i=0;i<objs.length;i++){ 
        if(objs[i].type.indexOf("css")>-1&&objs[i].title){ 
          objs[i].disabled = true; 
          if(objs[i].title==strCSS) intFound=i; 
        } 
      } 
      objs[intFound].disabled = false; 
      writeCookie("stylesheet",objs[intFound].title); 
    } writeCSS(); 
    setStyleSheet(readCookie("stylesheet")); 
     
    //--> 
    </script> 
    </head> 
    <body> 
    <div class="topNav"><h1>css实时切换风格、皮肤演示</h1>
    </div> 
    <div class="blank4"></div> 
    <div class="skin"> 颜色：<script type="text/javascript">writeCSSLinks();</script> </div> 
    </div> 
    <div class="blank4"></div> 
    <div class="NewsBody"> 
         <div class="CoLeft"> 
              <div class="clear"></div> 
         </div> 
         <div class="CoCenter"> 
              <div class="CConter"></div>     
         <div class="clear"></div> 
         </div> 
         <div class="CoRight"> 
              <div class="clear"></div> 
         </div> 
    <div class="clear"></div>      
    </div> 
    <div class="blank4"></div> 
    <div class="footer"></div> 
    </body> 
    </html>
    自己再定义几种不同的css样式文件就可以了