改变风格(css)的四种方法

：带cookies功能

引用内容：

使用方法

将上面的代码存为 styleswitch.js

引用内容：

请选择下面的下拉菜单测试换肤效果

css.css
css1.css
css2.css
css3.css



选择样式单文件

var csss=new Array();
csss[0]="css.css";
csss[1]="css1.css";
csss[2]="css2.css";
csss[3]="css3.css";
var i;
for(i=0;i<4;i++)
if(thisskin==csss[i])
document.write(""+csss[i]+"样式单文件");
else
document.write(""+csss[i]+"样式单文件");

2：复杂一点的

引用内容：

function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}

function setStylesheet(title) {
var i, cacheobj
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //enable chosen style sheet
}
}
}

function chooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu 
var i
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (i=0; iif (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
setStylesheet(selectedtitle)

function externalLinks() { 
if (!document.getElementsByTagName) return; 
var anchors = document.getElementsByTagName("a"); 
for (var i=0; ivar anchor = anchors[i]; 
if (anchor.getAttribute("href") && 
anchor.getAttribute("rel") == "external") 
anchor.target = "_blank"; 
} 
} 
window.onload = externalLinks;

使用方法

将上面的代码存为 styleswitch.js

引用内容：

默认风格
橙色风格
蓝色风格

3：简单的方法

引用内容：

function setStyle(title) {

//预定义变量
var i, links;

//用DOM方法获得所有的link元素
links = document.getElementsByTagName("link");

for(i=0; links[i]; i++) {

//判断此link元素的rel属性中是否有style关键字
//即此link元素是否为样式表link
//同时判断此link元素是否含有title属性
if(links[i].getAttribute("rel").indexOf("style") != -1
&& links[i].getAttribute("title")) {

//先不管三七二十一把它设为disabled
links[i].disabled = true;

//再判断它的title中是否有我们指定的关键字
if(links[i].getAttribute("title").indexOf(title) != -1)

//如果有则将其激活
links[i].disabled = false;
}
}
}

使用方法

将上面的代码存为 styleswitch.js

引用内容：

title="a" href="css0.css" />
title="b" href="css1.css" />
title="c" href="css2.css" />
title="d" href="css3.css" />

请选择下面的下拉菜单测试换肤效果

4：用了一个可以隐藏的层来设定风格

引用内容：

// 隐藏显示换肤框
function ShowHideDiv(init) {
 if(document.getElementById("Sright").style.display == "block"){
   document.getElementById("Sright").style.display = "none";
  }
  else{
   document.getElementById("Sright").style.display = "block";
  }
}
//-->

其他的和上面的三种差不多

/Files/MaxIE/rogu_changecss.rar