<link href="green.css" rel="stylesheet" type="text/css" />
window.onload = function ()
{
var oLink = document.getElementsByTagName("link")[0];
var oSkin = document.getElementById("skin").getElementsByTagName("li");
for(var i = 0; i< oSkin.length; i++)
{
oSkin[i].onclick = function ()
{
for(var p in oSkin) oSkin[p].className = "";
this.className = "current";
oLink['href'] = this.id + ".css";
}
}
};
<body>
<p id="outer">
<ul id="skin">
<li id="red" title="红色">红</li><li id="green" class="current" title="绿色">绿</li><li id="black" title="黑色">黑</li>
</ul>
<ul id="nav">
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">娱乐</a></li>
<li><a href="javascript:;">体育</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">音乐</a></li>
<li class="last"><a href="javascript:;">旅游</a></li>
</ul>
</p>
</body>
this.className = "current"表示什麼?是對應目前頁面是綠色狀態下的按鈕嗎
this.className = "current";
將目前被點擊的那個
.css 應該是一個樣式文件,透過id來載入指定的皮膚樣式。
link 是一個 html element,用來載入資源的。
一般來說,換膚的話會牽扯到很多CSS。我通常都會把外聯的CSS換掉來做這個功能。
假設我現在有一個HTML檔案和兩個HTML皮膚(就是倆CSS文件,一紅一黃)。
簡單的程式碼如下
大概就是這個感覺
你這個程式碼應該沒完,他這個程式碼的意思是修改皮膚,動態載入css樣式。