一、動態改變頁面風格效果，改變上面的下拉框，看看頁面背景及文字改變效果
首先做一個下拉框
代碼:
<SELECT onChange="document.styleSheets[0].href=this.options[this.selectedIndex].value+'.css'" >
<OPTION value="Style/mr" selected>默認風格</OPTION>
<OPTION value="Style/red">粉紅風情</OPTION>
<OPTION value="Style/blue1">藍色天空</OPTION>
<OPTION value="Style/block1">灰暗憂鬱</OPTION>
<OPTION value="Style/green"> 綠色地帶</OPTION>
<OPTION value="Style/blue"> 藍色港灣</OPTION>
<OPTION value="Style/block"> 黑白相間</OPTION>
</SELECT>
<OPTION value="Style/mr" selected>默認風格</OPTION>
<OPTION value="Style/red">粉紅風情</OPTION>
<OPTION value="Style/blue1">藍色天空</OPTION>
<OPTION value="Style/block1">灰暗憂鬱</OPTION>
<OPTION value="Style/green"> 綠色地帶</OPTION>
<OPTION value="Style/blue"> 藍色港灣</OPTION>
<OPTION value="Style/block"> 黑白相間</OPTION>
</SELECT>
二、實現思路
1、製作幾個不同的CSS文件
mr.css 代碼
red.css 代碼
blue.css 代碼
blue1.css 代碼
block.css 代碼
block1.css 代碼
2、網頁調用某個默認的CSS文件，本例默認文件：mr.css
3、製作下拉列表框，其值設爲前面作好的CSS文件名稱
4、利用Onchange（）事件動態調用CSS文件，達到頁面風格改變的效果
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>改變頁面風格</TITLE>
<LINK id="1" type="text/css" rel="stylesheet" href="style/mr.css" >
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<TABLE width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD>選擇界面風格：<SELECT onChange="document.styleSheets[0].href=this.options[this.selectedIndex].value+'.css'" >
<OPTION value="Style/mr" selected>默認風格</OPTION>
<OPTION value="Style/red">粉紅風情</OPTION>
<OPTION value="Style/blue1">藍色天空</OPTION>
<OPTION value="Style/block1">灰暗憂鬱</OPTION>
<OPTION value="Style/green"> 綠色地帶</OPTION>
<OPTION value="Style/blue"> 藍色港灣</OPTION>
<OPTION value="Style/block"> 黑白相間</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
四、製作改變頁面風格網頁 把源代碼粘貼到記事本文件,保存爲後綴名爲html or htm文件即可。<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>改變頁面風格</TITLE>
<LINK id="1" type="text/css" rel="stylesheet" href="style/mr.css" >
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<TABLE width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD>選擇界面風格：<SELECT onChange="document.styleSheets[0].href=this.options[this.selectedIndex].value+'.css'" >
<OPTION value="Style/mr" selected>默認風格</OPTION>
<OPTION value="Style/red">粉紅風情</OPTION>
<OPTION value="Style/blue1">藍色天空</OPTION>
<OPTION value="Style/block1">灰暗憂鬱</OPTION>
<OPTION value="Style/green"> 綠色地帶</OPTION>
<OPTION value="Style/blue"> 藍色港灣</OPTION>
<OPTION value="Style/block"> 黑白相間</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</BODY>
</HTML>