<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>What does this.className = "current" mean? Does it correspond to the button that is in the green state on the current page?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
this.className = "current";
Set the class of the currently clicked <li> to current to achieve the purpose of dynamically changing the label style
.css should be a style file that loads the specified skin style by id.
link is an html element used to load resources.
Generally speaking, skin change will involve a lot of CSS. I usually replace the external CSS to do this function.
Suppose I now have an HTML file and two HTML skins (two CSS files, one red and one yellow).
The simple code is as follows
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
That’s probably what it feels like
Your code should be endless. The meaning of this code is probably to modify the skin and dynamically load css styles.