JS学习笔记 - fgm练习 - 网页换肤

自己做的：

总结：

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

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

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

疑问：

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

.active{
        background: white!important;
        /* 这里设置了important才能生效，原理？ */
    }

  <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练习 - 网页换肤

猜你喜欢