02 網頁換膚

時間 2019-12-14

標籤網頁欄目 HTML 简体版

原文原文鏈接

效果圖：javascript

思路：
要應用的樣式css文件單獨保存，經過HTML中link標籤連接屬性變化來應用樣式。css

獲取link標籤
遍歷所要改變的標籤名
綁定點擊事件
設置className類名應用樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁換膚</title>
    <style>
        body, ul, li {
            margin: 0;
            padding: 0;
        }

        html, body { height: 100%; }

        body { font: 12px/1.5 Tahoma; }

        li { list-style-type: none; }
        
        a:link, a:visited { text-decoration: none; }

        a:hover { text-decoration: underline; }

        #outer {
            width: 500px;
            margin: 0 auto;
            overflow: hidden;
            zoom: 1;
        }

        #skin, #nav {
            overflow: hidden;
            zoom: 1;
        }

        #skin { margin: 10px 0; }

        #skin li {
            float: left;
            width: 6px;
            height: 6px;
            cursor: pointer;
            overflow: hidden;
            margin-right: 10px;
            text-indent: -9999px;
            border: 4px solid;
        }

        #skin li.current { background: #fff!important; }

        #red {
            border-color: red;
            background: red;
        }

        #green {
            border-color: green;
            background: green;
        }
        
        #black {
            border-color: black;
            background: black;
        }

        #nav { border: 1px solid #fff; }

        #nav li {
            float: left;
            width: 82px;
            line-height: 25px;
            text-align: center;
            border-right: 1px solid #fff;
        }

        #nav li.last {
            width: 83px;
            border-right-width: 0;
        }

        #nav li a { color: #fff; }

    </style>
    <!-- // 應用網頁默認皮膚樣式 -->
    <link rel="stylesheet" href="green.css">
    <script>
        window.onload = function() {

            // 獲取第一個link標籤
            var oLink = document.getElementsByTagName("link")[0];

            // 獲取id爲skin下的全部li標籤
            var oSkin = document.getElementById("skin").getElementsByTagName("li");

            // 遍歷skin下的全部li標籤
            for(var i = 0; i < oSkin.length; i++) {

                // 綁定點擊事件
                oSkin[i].onclick = function() {

                    // 枚舉oSkin對象的屬性，初始化class類名
                    for(var p in oSkin) oSkin[p].className = "";

                    // 設置當前class類名爲current
                    this.className = "current";

                    // 應用相對應的樣式文件
                    oLink["href"] = this.id + ".css"; 
                }
            }
        }
    </script>
</head>
<body>
    <div 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>
    </div>
</body>
</html>

1、CSS樣式：

1. body { font: 12px/1.5 Tahoma; }社麼意思？
解釋：
1.5是行高（line-height），1.5表示是12px的1.5倍，即font: 12px;line-height: 1.5。也能夠理解font-size:12px;line-height:1.5em，即字符高度的1.5倍。
這是css中font的簡寫寫法。em單位是指父元素的字體大小。
字體：字體大小/字體行高字體格式。html

詳細寫法：java

body {
    font-size: 12px;
    line-height: 1.5;
    font-family: Tahoma;
}

tips:
tahoma 大河馬字體，Tahoma爲Windows操做系統的英文默認字型。Tahoma是種很是圓滑的字體。這個字體比較均衡，中英文混排顯示時，不會出現中英文不對齊的狀態。數組

sans-serif 表示是無襯線字體，是一種通用字體族。瀏覽器

px像素（Pixel），相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。

所以用px來定義字體，就沒法用瀏覽器字體放大的功能。
任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合:1em=16px。那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明font-size：62.5%，這就使em值變爲16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。字體

CSS中em屬性有以下特色優化

em的值並非固定的；
em會繼承父級元素的字體大小。

因此咱們在寫CSS的時候，須要注意this

body選擇器中聲明Font-size=62.5%；
將你的原來的px數值除以10，而後換上em做爲單位；
從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

2. CSS中zoom:1的做用
兼容IE六、IE七、IE8瀏覽器，常常會遇到一些問題，可使用zoom:1來解決
zoom屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支持。它能夠設置或檢索對象的縮放比例。操作系統

zoom的使用方法：
zoom : normal | number
normal :　默認值。使用對象的實際尺寸
number :　百分數 | 無符號浮點實數。浮點實數值爲1.0或百分數爲100%時至關於此屬性的 normal 值用白話講解就是zoom:後面的數字即放大的倍數，能夠是數值，也能夠是百分比。而這個屬性只要在IE中才起做用。

2、JavaScript

for-in語句是一種精準的迭代語句，能夠用來枚舉對象的屬性。
for(var p in oSkin) oSkin[p].className = "";這一句了，會搞不懂這個p表明啥。
那上面就是把oSkin這個對象存在的屬性名賦值給變量P，這裏的oSkin是一個HTMLCollection[li, li.current, li]，HTMLCollection 對象的行爲和只讀數組同樣，因此可使用 JavaScript 的方括號，經過編號或名稱索引一個 HTMLCollection 對象。

總結：

經過設置className類名，實現樣式切換。知道設置clasName類名也是一種不錯的選擇，能夠把多個樣式單獨保存一個文件中，實現代碼優化！仍是不少能夠優化的，現因能力有限，先實現簡單的功能，往後再添加其餘功能。汗！技術能力嚴重不足，不少都須要參考源碼來了解，不過多多研究原生的JavaScript代碼，有益於增長紮實的基礎，也是一種實力的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。