本方法只適用於單頁面,而且在使用者瀏覽器支援javascript的前提下,方法是用Javascript的DOM方法訪問link對象,禁用不需要的樣式,代碼:
先做兩組皮膚:
<link rel="stylesheet" href="style/style1.css" type="text/css" title="style1"/>
<link rel="stylesheet" href="style/style2.css" type="text/css" title="style2" />
指令碼:
<script type="text/javascript">
function setStyle(title)
{var i, links;
//用DOM方法獲得所有的link元素
links = document.getElementsByTagName("link");
for(i=0; links[i]; i++)
{//判斷此link元素的rel屬性中是否有style關鍵字
//即此link元素是否為樣式表link
//同時判斷此link元素是否含有title屬性
if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title"))
{
//先全部設為disabled
links[i].disabled = true;//再將選擇的放開
if(links[i].getAttribute("title").indexOf(title) != -1)links[i].disabled = false;
}}
}
</script>
放兩個按鈕:
<input type="button" value="style1" onclick="setStyle('style1');" />
<input type="button" value="style2" onclick="setStyle('style2');" />