网页风格化 用CSS实现皮肤适时切换

html-css016

网页风格化 用CSS实现皮肤适时切换,第1张

首先准备好几种风格的css文件:

样式部分:

<link id="css" rel="stylesheet" type="text/css" href="style.css"/>

js部分

function redCSS(){

document.getElementById("css").href="red.css"

}

html部分

<span onclick="redCSS">切换红色风格</span>

如果需要下次打开页面抱持这个风格,那么需要用到cookie

<link href="skins/yellow/yellow.css" rel="stylesheet" type="text/css" id="cssfile" />

刚开始的时候要给link命名id="cssfile",然后加上下面的就行了,其实就是更换样式表;

JS:

<script language="javascript">

function changestyle(name){

css=document.getElementById("cssfile")

css.href="skins/"+name+"/"+name+".css"

document.all.sel.options[0].selected=true

}

</script>

select:

<select name="sel" onchange="changestyle(this.options[this.options.selectedIndex].value)">

<option value="base">请选择</option>

<option value="base">经典蓝</option>

<option value="black">冷酷黑</option>

<option value="yellow">秋天黄</option>

<option value="blue">蓝色的</option>

</select>