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代码，有益于增长扎实的基础，也是一种实力的。