读书人

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

发布时间: 2012-02-17 17:50:42 作者: rapoo

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 ') "

读书人网 >CSS

热点推荐