实现在客户端静态换肤(更新CSS)

最新推荐文章于 2023-09-21 12:01:29 发布

flashlm

最新推荐文章于 2023-09-21 12:01:29 发布

阅读量2.2k

点赞数

分类专栏： 14-WEB基础文章标签： css themes stylesheet function javascript null

本文链接：https://blog.youkuaiyun.com/flashlm/article/details/1899103

版权

14-WEB基础专栏收录该内容

3 篇文章

订阅专栏

　　首先要有两有两套CSS文件,这是前提,不然就没有肤可以换了.
实现思路：
　　主要是用JavaScript动态地修改内在中的HTML结构,向里面添加、删除、修改HTML代码，在Cookie里保存用户的CSS选择情况。
过程：
　　刚开始想用CSS覆盖来实现，因为大家知道一般情况下CSS是根据最后面的来显示的，如果前后有两个CSS的某项是一定的，选择后者。然后，如果这样的话，困难比较大，因为这样要求两个CSS所包含的控制项基本一致，否则在实现相关覆盖的过程中，总会有一些不足，然而这做起来比较麻烦，特别是有多套CSS的情况下更麻烦。
　　后面想到把不要的css的Link删掉，然后删掉后，浏览器并不会进行重新加载，又是一个问题。
　　后来在看stylesheet的属性时，一个disabled属性吸引了我，原来可以把一个CSS文件Disable掉。于是重新改写我的程序，终于见效。

代码：

// JScript File
// 修改皮肤JS 添加人：flashlm 07-11-22AM
//
// 在客户端设置Cookies，保存所选中的皮肤
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":"");
}
//读取Cookie,用来选择皮肤
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;
}
//清除页面CSS
function clearcss()... {
    //获得Head节点
    var head = document.getElementsByTagName('HEAD').item(0);
    //循环删除Link节点
    while(head.getElementsByTagName('link').length>0)
    ...{
        var oldStyle = head.getElementsByTagName('link').item(0);
        head.removeChild(oldStyle);
    }
}
//禁用CSS,用于将之前的CSS禁掉
function disablecss()... {
    for ( i = 0; i < document.styleSheets.length; i++ )
    ...{
        document.styleSheets(i).disabled=true;
    }
}
//修改CSS,用于向页面添加CSS
function changecss(url)... {
    if(url!="")...{
        var head = document.getElementsByTagName('HEAD').item(0);
        //新建Link节点
        var style = document.createElement('link');
        style.href = url;
        style.rel = 'stylesheet'
        style.type = 'text/css';
        disablecss();
        //添加Link节点
        head.appendChild(style);
        var expdate=new Date();
        expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
    //expdate=null;
    //以下设置COOKIES时间为1年,自己随便设置该时间..
    SetCookie("petshop_nowskin",url,expdate,"/",null,false);
    }
}
//合Select宽选中当前使用的皮肤
function changeselect(StrTemp2)... {
    var i;
    var SearchFlag=0;
    var StrTemp='';
//    var theme=document.getElementById('themes');
    for(i=0;i<document.getElementById("themes").length;i=i+1)...{
        StrTemp=document.getElementById("themes").item(i).value;
        //如果是当前皮肤
        if(StrTemp==StrTemp2) ...{
            document.getElementById("themes").item(i).selected = true;
        }
        else
        {
            document.getElementById("themes").item(i).selected = false;
        }
    }
}

在页面顶部引入上面的JS文件，然后在叶面里加个这样的一个Select：