总结：

1. 点击按钮，div内部变色，边框保持颜色不变。

实现原理：其实本来就把background 和 border 分别设置了同一个颜色，看似是一个整体，其实本来就是分开的。

那么点击的时候，只需要更改background 的颜色。  border 部分不需要设置。

2. for in  循环，遍历数组的用法：

for(var p in oSkin) oSkin[p].className = "";

等价于下面的代码：
for(var i=0; i<aDiv.length; i++)
{
　　aDiv[i].className = ''；
　};

3. 把要更改的式样分别用外部样式表存起来，只更改引入link的href值。

oLink['href'] = this.id + ".css";

疑问：

1. 更改类名，引发按钮的背景色变化，CSS里要设置 !important 才生效， 原理是？

.active{

        background: white!important;

        /* 这里设置了important才能生效，原理？ */

    }

案例写的：

<link href="green.css" rel="stylesheet" type="text/css" />

<script>

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

        }

    }

};

</script>

自己做的：

  <style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}    
　　body{

        background-color: #a3c5a8;

    }

    ul{

        margin: 5px auto;

        width: 500px;

        height: 25px;

        display: block;

        border: 1px solid white;

        background: green;

    }

    ul li{

        list-style: none;

        float: left;

        width: 83px;

        text-align: center;

        box-sizing: border-box;

        border-right: 1px solid white;

    }

    ul li:last-child{

        border: none;

    }

    ul li a{

        color: white;

        text-decoration: none;

        font-size: 12px;

        line-height: 25px;

    }

    ul li a:hover{

        text-decoration: underline;

    }

    #outer{

        margin: 8px auto;

        width: 500px;

    }

    /* .click_div{

        width: 14px;

        height: 14px;

        display: inline-block;

        margin-right: 7px;

    } */

    #outer div{

        margin-right: 7px;

        border-width: 4px;

        border-style: solid;

        width: 6px;

        height: 6px;

        display: inline-block;

    }

    /* 选色按钮的构成：background 6px

    border 4px *2,  一共14px

    每次点击，border颜色不变，设置background颜色变化。 */

    #div1{

        background-color: red;

        border-color: red;

    }

    #div2{

        background-color: green;

        border-color: green;

    }

    #div3{

        background-color: black;

        border-color: black;

    }

    .active{

        background: white!important;

        /* 这里设置了important才能生效，原理？ */

    }

    </style>

    <script>

    window.onload = function()

    {

        oDivOuter = document.getElementById('outer');

        aDiv = oDivOuter.getElementsByTagName('div');

        var oBody = document.getElementsByTagName('body')[0]; // 用TagName记得指定是第几个

        var oUl = document.getElementsByTagName('ul')[0];

       // var btnColor = this.style.backgroundColor;

        var oBodyColor = ["pink", "#a3c5a8", "#ccc"];

        var oUlColor = ["red", "green", "black"]

        for(i=0; i<aDiv.length; i++)

        {

            aDiv[i].index = i;

            aDiv[i].onclick = function()

            {

                for(var i=0; i<aDiv.length; i++)

                {

                    aDiv[i].className = '';

                };

                this.className = "active";

                // this.style.border = "4px" + btnColor + "solid"; 

                oBody.style.backgroundColor = oBodyColor[this.index];

                oUl.style.backgroundColor = oUlColor[this.index];

            };

        };

    };

    </script>

</head>

<body>

<div id="outer">

    <div id="div1"></div>

    <div id="div2" class="active"></div>

    <div id="div3"></div>

    <ul>

        <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><a href="javascript:;">旅游</a></li>

    </ul>

</div>

</body>

JS学习笔记 - fgm练习 - 网页换肤的更多相关文章

  1. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  2. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  3. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  4. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  5. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  6. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  7. JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件

    <style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...

  8. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  9. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

随机推荐

  1. Struts（18）标签

    控件标签 Struts 2 的标签有一组标签.更easy控制流程页面运行.下面是重要的Struts2控制标签列表: if /else 标签: 这些标签运行可在每一种语言找到的一种基本条件流程. 'If ...

  2. vim-插入格式化时间

    最近一直在搞vimrc的配置.其中有一点就是,我想要实现代码快速注释的功能.而这个功能中的一个关键点就是,我要获得系统当前的时间,然后插入到我的注释里面.我知道vimrc支持shell命令,既使用:r ...

  3. Onvif开发之代码框架生成篇

    看了前一篇的ONVIF的简单介绍应该对它的基本使用都有了一些基本的了解了吧!下面我讲一步分解向大家介绍下如何通过gsoap生成需要的代码,以及代码中需要注意的问题[基于Linux平台 C开发] 生成O ...

  4. vue中computed与watch的异同

    一.computed 和 watch   都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. ...

  5. netty实现TCP长连接

    所用jar包 netty-all-4.1.30.Final.jar 密码:rzwe NettyConfig.java,存放连接的客户端 import io.netty.channel.group.Ch ...

  6. Ubuntu 下安装 Python 虚拟环境

    写在前面: 安装指南是在 Ubuntu 下面操作的.不同的 Linux 版本,安装指令不同.所以,该指南的某些指令对于像 CentOS 等非 Ubuntu 系统不适用. 为什么需要使用虚拟环境? 虚拟 ...

  7. python stomp activemq客户端

    #coding=utf-8import timeimport sysimport stomp class MyListener(object): def on_error(self, headers, ...

  8. exit---退出目前的shell

    exit命令   exit命令同于退出shell,并返回给定值.在shell脚本中可以终止当前脚本执行.执行exit可使shell以指定的状态值退出.若不设置状态值参数,则shell以预设值退出.状态 ...

  9. xml格式报文的拼装，和解析成实体类

    我们的微信支付,使用的是第三方的支付,某银行的微信支持渠道.所有的接口请求.应答都是xml格式报文,这样就需要用到xml格式报文的拼装和解析,这儿简单讲一下. 拼接xml格式报文. 从页面表单提交和配 ...

  10. [Java开发之路]（16）学习log4j日志

    1. 新建一个Javaproject.导入Jar包(log4j-1.2.17.jar) Jar包下载地址:点击打开链接 2. 配置文件:创建并设置log4j.properties # 设置 log4j ...