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";
}
}