简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - JS web page skinning problem
世界只因有你
世界只因有你 2017-07-05 10:50:04
0
4
850

<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?

世界只因有你
世界只因有你

reply all(4)
Peter_Zhu
Peter_Zhu2017-07-05 10:52:04 4 floor

this.className = "current";
Set the class of the currently clicked <li> to current to achieve the purpose of dynamically changing the label style

Like +0
Add Reply
巴扎黑
巴扎黑2017-07-05 10:52:04 3 floor

.css should be a style file that loads the specified skin style by id.

link is an html element used to load resources.

Like +0
Add Reply
Ty80
Ty802017-07-05 10:52:04 2 floor

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>

<meta charset="utf-8">
<title>test</title>
<link id="css" rel="stylesheet" href="red.css">

</head>
<body>

<button id="red">red</button>
<button id="yellow">yellow</button>
<script>
    var css = document.getElementById("css");
    var red = document.getElementById("red");
    var yellow = document.getElementById("yellow");
    red.onclick = function () {
        css.href = "red.css";
    };
    yellow.onclick = function () {
        css.href = "yellow.css";
    };
</script>

</body>
</html>
That’s probably what it feels like

Like +0
Add Reply
滿天的星座
滿天的星座2017-07-05 10:52:04 1 floor

Your code should be endless. The meaning of this code is probably to modify the skin and dynamically load css styles.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！