JS更换CSS样式表记录COOKIE

发布网友发布时间：2022-05-11 16:40

共6个回答

热心网友时间：2022-04-21 12:11

/* ======= FileName:skinCss.js =======
* Author:Crystal (Feng Fupeng)
* Date:2008-02-24
* Email:8215349[at]qq.com
*/

function GetCookie(sName)
{
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
{
return aCrumb[1];
}
}
return null;
}

function SetCookie(name, value, time, domain)
{
var expdate = new Date();
var expires = time;
if(expires!=null){
expdate.setTime(expdate.getTime() + ( expires * 1000 ));
expd = "expires="+expdate.toGMTString()+";";
}else
expd = "";
if (domain)
{
domain = "domain="+ domain +"; path=/; ";
}
document.cookie = name + "=" + escape (value) + "; " + expd + domain;
}
var cookieTag = "nd_skin";
var vSkin = GetCookie(cookieTag);

//皮肤撤销初始化皮肤
if(vSkin=="yx_subject0708"){setSkinColor('blue');}

function setSkinColor(vSkinNum)
{
SetCookie( cookieTag, vSkinNum, 60*60*24*30,"");
if(vSkinNum=="yx_subject0708"){vSkinNum="blue";}
document.getElementById("skinCss").href = "http://192.168.2.123/home/css/"+vSkinNum+".css";
}

if( vSkin && vSkin!="Style" )
{
document.getElementById("skinCss").href = "http://192.168.2.123/home/css/"+vSkin+".css";
}
上面是JS里面代码,函数名字能看的懂吧,包含了换css的路径和初试输出还有cookie的记录,都包含在上面了,解释起来就很多了,相信你应该能看的明白
页面上html代码如下:
<link id="skinCss" href="http://172.21.13.133/KM_home/css/blue.css" rel="stylesheet" type="text/css" />
这个注意这个ID,你要换名字也可以,JS里面也要对应的换,至于放哪位置,就不必说了吧
然后还有一段就是你要换样式,那么一定要有触发事件
在body里面可以加上 <ol>
<li><span class="skinPink" onclick="setSkinColor('pink');" title="粉红色">粉红</span></li>
<li><span class="skinBlue" onclick="setSkinColor('blue');" title="蓝色">蓝</span></li>
<li><span class="skinRed" onclick="setSkinColor('red');" title="红色">红</span></li>
<li><span class="skinGreen" onclick="setSkinColor('green');" title="绿色">绿</span></li>
<li><span class="skinPeagreen" onclick="setSkinColor('peagreen');" title="淡绿色">淡绿</span></li>
<li><span class="skinOrange" onclick="setSkinColor('orange');" title="橙色">橙</span></li>
<li><span class="skinPurple" onclick="setSkinColor('purple');" title="紫色">紫</span></li>
<li><a href=javascript:homePage();>设为首页</a></li>
</ol>
看的明白么,这是本人曾经做过的一个同功能的风格切换JS
测试就不用了,现在页面用的好好的,你看看满意么?
=============
你发给我的代码我看过了,我发了邮箱回复给你了,你看看

热心网友时间：2022-04-21 13:29

兄弟分狗够高的，

呵呵只能给你个思路给一个link 然后给个id
用js去换他的href。。

/*获取Cookie值的方法*/
function getCookie(name){
//alert(document.cookie);
var search = name + "=";
if(document.cookie.length > 0){
var offset = document.cookie.indexOf(search);
if(offset != -1){
offset += search.length;
var end = document.cookie.indexOf(";", offset);
if(end == -1){end = document.cookie.length;};
return unescape(document.cookie.substring(offset, end));
}else {
return "";
}
}
return null;
}
/*写值到Cookie 中*/
function setCookieVal(name, value,savedays){
var today = new Date();
var expires = new Date();
var saveTime;
if(typeof savedays == "undefined"){
saveTime=30;
}else{
saveTime=savedays;
}
if(value instanceof Array){
value=value.join();
}
document.cookie = "";
if(saveTime==0){
document.cookie = name + "=" + escape(value)+";path=/";
}else{
expires.setTime(today.getTime() + 1000*60*60*24*Number(saveTime));
document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString()+";path=/";
}
return value;
}
var skinC={"Default":"style/skinDefault.css","skin1":"style/skin1.css"}
var setFont={"setF1":"style/setFont01.css"}
function addLink(){
var heads=document.getElementsByTagName("head");
var newLink=document.createElement("link");
newLink.type="text/css";
newLink.rel="stylesheet";
newLink.id="pageSkin";
heads[0].appendChild(newLink);

var linkid=document.getElementById("pageSkin")
if(getCookie("wcjSkin")==0 || getCookie("wcjSkin")==undefined || getCookie("wcjSkin")==""){
linkid.href=skinC.Default;
}
if(getCookie("wcjSkin")==1){
linkid.href=skinC.skin1;
}

var IEw=(document.documentElement.clientWidth-910)/2;
var mR=document.getElementById("skinBox");

mR.style.right=IEw+45+"px"
}

function setLayout(o){
var lay=document.getElementById("skins");
var linkid=document.getElementById("pageSkin");
if(lay&&linkid){
if(o.className=="skin0"){
linkid.href=skinC.Default;
setCookieVal("wcjSkin",0);

//alert(getCookie("wcjSkin"))
}
if(o.className=="skin1"){
linkid.href=skinC.skin1;
setCookieVal("wcjSkin",1);
}
}
}

热心网友时间：2022-04-21 15:04

具体的参考资料你可以运行下，结果记录到COOKIE，已经测试通过
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS更换CSS样式表记录COOKIE</title>
<link id="a" href="default.css" rel="stylesheet" type="text/css" >
<script type="text/javascript">
//去左空格
function ltrim(s){
return s.replace( /^\s*/, "");
}

//去右空格
function rtrim(s){
return s.replace( /\s*$/, "");
}

//去左右空格
function trim(s){
return rtrim(ltrim(s));
}

//写入COOKIE
function set_cookie(name,value,expires, path,domain,secure){
document.cookie = name + "=" + encodeURI(value) +
( (expires) ? ";expires=" + expires : "" ) +
( (path) ? ";path=" + path : "" ) +
( (domain) ? ";domain=" + domain : "" ) +
( (secure) ? ";secure" : "");
}

//读取COOKIE,返回的值是COOKIE的名为name的值,没有name这个名就会返回假
function read_cookie(name){
var cookie_string = decodeURI(document.cookie);
var cookie_array = cookie_string.split(";");
for(var i=0;i<cookie_array.length;i++){
var cookie_num = cookie_array[i].split("=");
var cookie_name = cookie_num[0];
var cookie_value = cookie_num[1];
if(trim(cookie_name)==name){
return cookie_value;
}
}
return false;
}

//更换样式表写入状态到COOKIE
function change_style(){
var control = document.getElementById("style_menu");
if(control.selectedIndex>0){//表单列表的索引不是0时,才进行更换样式表,记录状态到COOKIE的操作
var to_css = control.options[control.selectedIndex].value;
document.getElementById("a").href = to_css;
var cookie_date = new Date();
cookie_date.setFullYear(cookie_date.getFullYear()+1);//保存一年时间,不要用setYear(),火狐显示的是年份-1900
set_cookie("css_style",to_css,cookie_date.toUTCString());
}
}

var get = read_cookie("css_style");
//名为css_style的COOKIE有值时调用该值的样式表
if(get!=false){
document.getElementById("a").href = get;
}
</script>
</head>

<body>
<form action="" method="get">
<label>选择风格:</label>
<select id="style_menu" name="style_menu" onchange="change_style();">
<option>-------</option>
<option value="default.css">缺省风格</option>
<option value="blue.css">蓝色风格</option>
</select>
</form>

<div>
<a id="nor" href="#">清荣峻茂</a>
<ul>
<li><a class="one" href="#">水清</a></li>
<li><a class="need" href="#">树荣</a></li>
<li><a class="need" href="#">山高</a></li>
<li><a class="need" href="#">草盛</a></li>
</ul>
</div>

</body>
</html>

参考资料：http://www.qxhtml.cn/comdream_detail.php?id=29

热心网友时间：2022-04-21 16:55

好一段时间没有碰JS的cookie有点生疏了..希望是你要的..

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="" type="text/css" id="css">
<title>CSS编程难题</title>
<script>
window.onload=function(){
var roll=document.getElementById("roll");
var css="mor.css";
if(document.cookie){
var cookies=document.cookie.split("; ");
for(var i=0;i<cookies.length;i++){
if(cookies[i].split("=")[0]=="name"){
css=cookies[i].split("=")[1];
document.getElementById("css").href=css;
}
}

}
roll.onclick=function(){
if(css=="mor.css"){
document.getElementById("css").href="even.css";
css="even.css";
}else{
document.getElementById("css").href="mor.css";
css="mor.css";
}
var date=new Date();
date.setMonth(date.getMonth()+6);
document.cookie="name="+css+";expires="+date.toUTCString();
}
}
</script>
</head>

<body>
<input type="button" id="roll" value="rollcolor">
</body>
</html>

热心网友时间：2022-04-21 19:03

我以前找过这个代码。
javascript+css实时切换网页风格、皮肤，并存入cookie。
这个应该就是你想要的，在这里下载：http://www.2ky.cn/d/156/4551.html

参考资料：http://www.2ky.cn/d/156/4551.html