花边管理软件官方网站

Css实现的颜色皮肤更换


这是一个css实现的下拉菜单。
这里我们用到了css的继承,把同一种颜色放到了一个父类,写法如下:
.BgColor
{
 background-color: #DEEEC8;
}
其它需要用到的同一种background-color都继承这个BgColor,
.BgColor,.SimpleListHeader
{
 background-color: #DEEEC8;
}
/*
列表控件的头部颜色
*/
.SimpleListHeader
{
}
这样SimpleListHeader就继承了BgColor。
如果需要进行颜色的皮肤更换,只要加多一个颜色的css,然后更改BgColor的颜色即可达到颜色皮肤更换。
那么如何实现点击模块颜色的图片,就实现皮肤的更换呢。
<link href="/css/GreeSkin.css" rel="stylesheet" type="text/css" id="skin" />
我只需要用js动态的改变link的href的链接css就可以实现皮肤更换了。
function ChangeSkin(color)
    {

        var css = document.getElementById("skin");
        if(css)
        {
            css.setAttribute("href","/CSS/"+color+"Skin.css");            
        }

    }
那如果我的页面存在IFrame,要使IFrame页面的颜色也进行更换,就需要下面的写法了
for(var i=0;i<document.frames.length;i++)
 {
    var css = document.frames[i].window.document.styleSheets.skin;
    if(css)
     {
         css.href = "/CSS/"+color+"Skin.css";
     
}
}
posted @ 2008-06-07 22:57  花边软件,花边管理软件,服装(鞋)管理软件  Views(843)  Comments(1Edit  收藏  举报
花边管理软件官方网站