javascript - JS 網頁換膚問題
世界只因有你
世界只因有你 2017-07-05 10:50:04
0
4
884

<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"表示什麼?是對應目前頁面是綠色狀態下的按鈕嗎

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

全部回覆(4)
Peter_Zhu

this.className = "current";
將目前被點擊的那個

  • 的class 設為 current,達到動態變更標籤樣式的目的
    巴扎黑

    .css 應該是一個樣式文件,透過id來載入指定的皮膚樣式。

    link 是一個 html element,用來載入資源的。

    Ty80

    一般來說,換膚的話會牽扯到很多CSS。我通常都會把外聯的CSS換掉來做這個功能。
    假設我現在有一個HTML檔案和兩個HTML皮膚(就是倆CSS文件,一紅一黃)。
    簡單的程式碼如下


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


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



    大概就是這個感覺

    滿天的星座

    你這個程式碼應該沒完,他這個程式碼的意思是修改皮膚,動態載入css樣式。

    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板