Javascript 切换页面 CSS 样式

网页样式切换

最新推荐文章于 2024-01-27 12:22:35 发布

转载最新推荐文章于 2024-01-27 12:22:35 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wengjinbao/archive/2007/03/27/690083.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的网页样式切换方案，通过简单的脚本即可让访问者在不同主题间自由切换，同时提供了HTML标签调用及切换方式。

越来越多的网站制作者期望为自己的网站设计多种风格，以便访问者能够选择自己喜欢的样式进行浏览，本文介绍的就是一个切换页面样式的解决方案。

--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------

Javascript:


    
      
    

    
     // 说明：Javascript 切换页面 CSS 样式 
    

    
     // 整理：http://www.CodeBit.cn 
    

    
      
    

    
     function setActiveStyleSheet
     (title
     ) 
     { 
    

     
     var i, a, main; 
    

     
     for
     (i=
     0; 
     (a = document.
     getElementsByTagName
     (
     "link"
     )
     [i
     ]
     ); i++
     ) 
     { 
    

     
     if
     (a.
     getAttribute
     (
     "rel"
     ).
     indexOf
     (
     "style"
     ) != 
     -1 && a.
     getAttribute
     (
     "title"
     )
     ) 
     { 
    

    
      a.
     disabled = 
     true; 
    

     
     if
     (a.
     getAttribute
     (
     "title"
     ) == title
     ) a.
     disabled = 
     false; 
    

     
     } 
    

     
     } 
    

    
     } 
    

    
      
    

    
     function getActiveStyleSheet
     (
     ) 
     { 
    

     
     var i, a; 
    

     
     for
     (i=
     0; 
     (a = document.
     getElementsByTagName
     (
     "link"
     )
     [i
     ]
     ); i++
     ) 
     { 
    

     
     if
     (a.
     getAttribute
     (
     "rel"
     ).
     indexOf
     (
     "style"
     ) != 
     -1 && a.
     getAttribute
     (
     "title"
     ) && !a.
     disabled
     ) 
     return a.
     getAttribute
     (
     "title"
     ); 
    

     
     } 
    

     
     return 
     null; 
    

    
     } 
    

    
      
    

    
     function getPreferredStyleSheet
     (
     ) 
     { 
    

     
     var i, a; 
    

     
     for
     (i=
     0; 
     (a = 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;i < ca.
     length;i++
     ) 
     { 
    

     
     var c = ca
     [i
     ]; 
    

     
     while 
     (c.
     charAt
     (
     0
     )==
     ' '
     ) c = 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", title, 
     365
     ); 
    

    
     } 
    

    
      
    

    
     var cookie = readCookie
     (
     "style"
     ); 
    

    
     var title = cookie ? cookie : getPreferredStyleSheet
     (
     ); 
    

    
     setActiveStyleSheet
     (title
     );



 

 
css 标签调用方式：
 

 HTML:

<link rel="stylesheet" type="text/css" href="css/white.css" title="white" />
<link rel="alternate stylesheet" type="text/css" href="css/black.css" title="black" />