多风格选择 样式实时切换

首先是javascript代码：

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  =   "" ;
  documents.cookie  =  name + " = " + value + expires + " ; path=/ " ;
}

function  readCookie(name) {
   var  nameEQ  =  name  +   " = " ;
   var  ca  =  documents.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);

然后把所有的样式表引入文档中：

< link  rel ="stylesheet"   type ="text/CSS"  href ="css.css"    />
< link  rel ="stylesheet"  type ="text/CSS"  href ="aaa.css"  title ="aaa"   />
< link  rel ="stylesheet"  type ="text/CSS"  href ="bbb.css"  title ="bbb"   />

切换样式的按钮如下写：

< a  href ="#"  onclick ="setActiveStyleSheet('',1); return false;" > 默认样式－白色 </ a >
< a  href ="#"  onclick ="setActiveStyleSheet('aaa',1); return false;" > 样式一－蓝色 </ a >
< a  href ="#"  onclick ="setActiveStyleSheet('bbb',1); return false;" > 样式二－橙色 </ a >

转载于:https://www.cnblogs.com/wddavid/archive/2007/03/26/688862.html