首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS实现页面风格的选择解决办法

2012-02-17 
CSS实现页面风格的选择网上有很多如下的代码,可是确没有解释以下的代码的文章.而我自己尝试着这三个步骤,

CSS实现页面风格的选择
网上有很多如下的代码,可是确没有解释以下的代码的文章.而我自己尝试着这三个步骤,都不成功.我想问下各位,有没有人能指点一下.
在这个js里面,有两个window.onload函数.我想问下,一个文件里,是否允许两个window.onload.


1.   styleswitcher.js  
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);  


2、CSS调用:

CODE:  
<link   rel= "stylesheet "   type= "text/css "   href= "default.css "   />   //默认的样式这样调用
<link   rel= "stylesheet "   type= "text/css "   href= "one.css "   title= "name_one "   />   //其他的样式这样调用
<link   rel= "stylesheet "   type= "text/css "   href= "two.css "   title= "name_two "   />


...  


3、JS调用:

CODE:  
<script   type= "text/javascript "   src= "styleswitcher.js "> </script>  


4、风格选择的实现:
写在页面的body中

CODE:  
<a   href= "# "  
onclick= "setActiveStyleSheet( ' ',1);  
return   false; "> 默认样式 </a>
<a   href= "# "  
onclick= "setActiveStyleSheet( 'name_one ',1);  
return   false; "> 样式一 </a>
<a   href= "# "  
onclick= "setActiveStyleSheet( 'name_two ',1);  
return   false; "> 样式二 </a>
 


[解决办法]
是否允许两个window.onload.
------------------------
允许,但后面设置的window.onload会代替前面的,其实还是只会执行1个。

你贴的JS中只有1个window.onload,还有个是window.onunload

看清楚了
[解决办法]
你的JS写的有问题吧:

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

这是循环吗?这循环什么时候结束??
[解决办法]
JS:
function SetCookie(name,value){
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(2 <argc)?argv[2]:null;
var path=(3 <argc)?argv[3]:null;
var domain=(4 <argc)?argv[4]:null;
var secure=(5 <argc)?argv[5]:false;
document.cookie=name+ "= "+escape(value)+((expires==null)? " ":( "; expires= "+expires.toGMTString()))+((path==null)? " ":( "; path= "+path))+((domain==null)? " ":( "; domain= "+domain))+((secure==true)? "; secure ": " ");
}

function GetCookie(Name) {
var search = Name + "= ";
var returnvalue = " ";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf( "; ", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end));
}
}
return returnvalue;
}

var thisskin;
thisskin=GetCookie( "nowskin ");
if(thisskin!= " ")
skin.href=thisskin;
else
skin.href= "css.css ";

function changecss(url){
if(url!= " "){
skin.href=url;
var expdate=new Date();
expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
//expdate=null;
//以下设置COOKIES时间为1年,自己随便设置该时间..
SetCookie( "nowskin ",url,expdate, "/ ",null,false);
}
}

使用:
onClick= "changecss( 'css.css ') "

热点排行